关键字:
数据劫持+观察者模式
- 当一个值被读取时,进行追踪
- 当一个值被改变时,检查是否有追踪队列
- 重新运行追踪队列里的副作用函数
观察者模式
- 注册环节
- 发布环节
Vue响应式原理:
- 模板会被编译成render函数
- 把Data函数返回的数据,通过内部的reactive生成响应式对象,创建观察者对象-Dep对象
- 监听值的引用,get触发dep对象的append方法【收集依赖-函数】
- 监听值的改变,set触发dep对象的notify方法【触发依赖-函数】
- mount阶段:创建每个组件对应的watcher对象,并将watcher放在Dep.target上,同时进行调用组件的render函数,render函数里会访问响应式数据中的属性,进而触发属性的getter函数,并将watcher收集为当前属性的依赖。
- update阶段:属性值发生变化,setter函数调用的Dep.notify会通知属性所有被收集的watcher进行update,即重新render
Vue异步更新队列:
侦听到数据变化,vue会开启一个队列,将同一事件循环中发生的所有数据变更缓存起来,如果同一个侦听器被多次触发,也只会缓存一次。 在下一个事件循环中,vue刷新队列,并执行队列中的工作。 所以可以在nextTick中获取dom。
其他
watchEffect会在update(render)之前执行,是因为watchEffect里面的副作用可能会执行多次,防止不必要的重复调用update。 一个组件的模板被编译成一个render函数,render函数创建vnode。render函数也被包裹在副作用中