常见前端面试之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 派发一个自定义事件,父组件接收到后,由父组件 修改。

猜你喜欢

转载自blog.csdn.net/ybigbear2/article/details/132202958