vue常见面试题

一、响应式原理？

vue中的三个核心类：

1、Observer：给对象的属性添加getter和setter、用于依赖收集和派发更新

2、Dep：用于收集当前响应式对象的依赖关系，每个响应式对象都有一个dep实例；dep.subs = watcher[]（dep.subs就是一个watcher数组）；当数据发生变更的时候，会通过dep.notify()通知各个watcher

3、Watcher：观察者对象，分为render watcher、computed watcher、user watcher？

依赖收集：

1、initState阶段， 对computed属性初始化时，会触发computed watcher依赖收集

2、initState阶段，对监听属性初始化时，会触发user watcher依赖收集

3、render阶段，会触发render watcher依赖收集

派发更新：

Object.defineProperty

1、组件中对响应的数据进行了修改，会触发setter逻辑

2、当数据发生变更的时候，触发dep.notify()逻辑

3、dep遍历所有subs，调用每一个watcher的update方法

总结原理：当创建vue实例时，vue会遍历data里的属性，Object.defineProperty为属性添加getter和setter对数据的读取进行劫持

getter：依赖收集

setter：派发更新

每个组件的实例都会有对应的watcher实例，当数据发生变更时，触发以上123？

二、计算属性的实现原理？

computed watcher，计算属性的监听器，持有一个dep实例，通过dirty属性标记计算属性是否需要重新求值，当computed的依赖值改变的时候，就会通知订阅的watcher进行更新，对于computed watcher会将dirty属性设置为true，并且进行计算属性方法的调用

computed 所谓的缓存是什么？缓存的意义或实际应用？

计算属性是基于它的响应式依赖进行缓存的，只有依赖发生改变的时候才会重新求值、未改变的时候获取的是以前存的值；比如计算属性方法内部极度耗时、遍历极大数组时下次计算命中缓存节省时间？

三、Vue.nextTick原理

vue是异步执行dom更新的，一旦观察到数据变化，把同一个event loop中观察数据变化的watcher推送进这个队列，在下一次事件循环时，vue会清空异步队列，并进行dom更新