Vue 响应式原理

来源:互联网 发布:蚂蚁金服 基金知乎 编辑:程序博客网 时间:2024/04/30 19:38

将data与dom绑定的原理

首先引用官网的一张图

要将data与dom绑定,首先要满足一下几点
1、Vue实例内预先定义了data(及时该值为”“也要预先定义)
2、使用Vue.set(object, key, value)或者vm.$set(object, key, value)方法设置了data

因为Vue实例创建的时候,Vue将遍历data内的所有对象并使用 Object.defineProperty 把这些属性全部转为 getter/setter。当data的属性值被改变,会触发对应的setter方法,通知watcher重新计算,所有关联的组件就会被更新。

ps:如果Vue实例内data的对象是个数组,进行添加和删除数组的内容不会触发setter更新组件,因为新旧数据指向同一个地址。此时可以创建一个新的对象重新赋值就能触发。

Vue异步更新队列

Vue 异步执行 DOM 更新需要注意以下几点:
1、当更新数据后,Vue将开启一个队列,并且同一个watcher多次触发,只会进入队列一次。
2、当更新数据后,下一行代码使用vm.$nextTick(function(){}),当更新dom成功后,会执行这个回调函数。