记录最近看的面试题:阐述vue2响应式原理

68 阅读1分钟

Vue2.x响应式原理

响应式数据的目标就是当对象本身或对象属性变化时,将会执行一些函数,最常见的就是render函数。(这里可能被问还有其他的吗)

Vue2.x采用数据劫持结合发布者-订阅者模式的方式:

  • 首先 通过Object.defineproperty遍历对象的每一个属性,把每一个属性转换成带有gettersetter的属性,读取属性的时候会运行getter,给属性赋值的时候就会运行setter

  • Vue会给响应式对象中的每个属性、对象本身、数组本身创建一个dep实例,每个dep都可以执行 依赖记录:是谁在用我派发更新:要通知那些用到我的人我变了。 当读取响应式对象某个属性时,它就会进行依赖收集,当改变某个属性时,它就会派发更新。

  • Vue的每一个组件实例都至少对应一个watcherwatcher中记录了该组件的render函数。 Watcher会先把render函数运行一次来收集依赖,其中用到的响应式数据就会被记录在这个watcher中。当数据变化时,dep就会通知该watcher

  • Watcher收到派发更新的通知后,把自己交给调度器(Scheduler),调度器维护一个队列,队列中同一个watcher仅会存在一次,队列中的watcher不是立即执行,是通过nextTick的工具方法把需要执行的watcher放入到事件循环的微队列中异步执行,而watcher将重新运行render函数,从而让界面重新渲染,同时重新记录当前的依赖(重新收集依赖)。