常见前端面试之VUE面试题汇总三

7. Vue 中封装的数组方法有哪些，其如何实现页面更新

在 Vue 中，对响应式处理利用的是 Object.defineProperty 对数据进 行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数 组的截取变化等，所以需要对这些操作进行 hack，让 Vue 能监听到 其中的变化。

那 Vue 是如何实现让这些数组方法实现元素的实时更新的呢，下面是 Vue 中对这些方法的封装：

简单来说就是，重写了数组中的那些原生方法，首先获取到这个数组 的__ob__，也就是它的 Observer 对象，如果有新的值，就调用 observeArray 继续对新的值观察变化（也就是通过 target__proto__ == arrayMethods 来改变了数组实例的型），然后手动调用 notify，通知渲染 watcher，执行 update。

8. Vue data 中某一个属性的值发生改变后，视图会立即同步执 行重新渲染吗？

不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之 后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在 缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要 的。然后，在下一个的事件循环 tick 中，Vue 刷新队列并执行实际（已去重的）工作。

9. 简述 mixin、extends 的覆盖逻辑

（1）mixin 和 extends

mixin 和 extends 均 是 用 于 合 并 、 拓 展 组 件 的 ， 两 者 均 通 过 mergeOptions 方法实现合并。

mixins 接收一个混入对象的数组，其中混入对象可以像正常的实例 对象一样包含实例选项，这些选项会被合并到最终的选项中。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

extends 主要是为了便于扩展单文件组件，接收一个对象或构造函数。

（2）mergeOptions 的执行过程

规 范 化 选 项 （ normalizeProps 、 normalizelnject 、normalizeDirectives)

对未合并的选项，进行判断

10. 子组件可以直接改变父组件的数据吗？

子组件不可以直接改变父组件的数据。这样做主要是为了维护父子组 件的单向数据流。每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。如果这样做了，Vue 会在浏览器的控制台中 发出警告。Vue 提倡单向数据流，即父级 props 的更新会流向子组件，但是反 过来则不行。这是为了防止意外的改变父组件状态，使得应用的数据 流变得难以理解，导致数据流混乱。如果破坏了单向数据流，当应用 复杂时，debug 的成本会非常高。

只能通过 $emit 派发一个自定义事件，父组件接收到后，由父组件 修改。