Vue响应式原理

1.如何追踪变化

当把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。
每个组件实例都有相应的watcher实例对象。它会在组件渲染的过程中把属性记录为依赖，之后依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新。

2.检测变化的注意事项

受现代JavaScript的限制，Vue不能检测到对象属性的添加或删除。由于Vue会在初始化实例时对属性执行getter/setter转化过程，所以属性必须在data对象上存在才能让Vue转换它，这样才能让它是响应的。
Vue不允许在已经创建的实例上动态添加新的根级响应式属性（root-level reactive property）。然而它可以使用Vue.set(object,key,value)方法将响应属性添加到嵌套的对象上。

3.声明响应式属性

由于Vue不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值。

4.异步更新队列

只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个watcher被多次触发，只会被推入到队列中一次。然后，在下一个的事件循环“tick”中，Vue刷新队列并执行实际工作。
为了在数据变化之后等待Vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTick(callback)。这样回调函数在DOM更新完成后就会调用。（$nextTick()返回一个promise对象）
————————————————
版权声明：本文为优快云博主「Pretty Few Fears」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_43621905/article/details/104808823