Vue 响应式原理
1. 如何追踪变化
当你把一个普通的JavaScript对象传给Vue实例的data选项,Vue将遍历此对象所有的属性,
并使用Object.defineProperty把这些属性转化为getter和setter,
这些getter和setter对于用户来说不可见,但是在内部它们让Vue追踪依赖,
在属性被访问和修改时通知变化。每个组件实例都有相应的watcher实例对象,它会在组件渲染
的过程中把属性记录为依赖,之后当依赖项的setter被调用时,会通知watcher重新计算,从而致使
相关联的组件更新。
2. 检测变化的注意事项
Vue不能检测到对象属性的添加或者删除,由于Vue会在初始化实例时对属性执行getter和setter转化,
所以属性必须在data对象上存在才能让Vue转换它,这样才能是响应的。
Vue不允许在已经创建的实例上动态添加新的根级响应式属性,但是可以使用Vue.set(object, key, value)
方法将属性添加到嵌套的对象上:Vue.set(vm.someObject, 'b', 2)
还可以使用全局方法: this.$set(this.someObject, 'b', 2)
假如想向已有对象添加多个属性,使用Object.assign()或_.extend()方法来添加属性。
但是这样,新属性不会触发更新。
这种情况下可以创建一个新对象,让它包含原对象的属性和新属性。
this.someObject = Object.assign({},this.someObject, {a:1, b:2});
3. 声明响应式属性
由于Vue不允许动态添加根级响应式属性,所以必须在初始化实例前声明根级响应式属性,哪怕是空值
var vm = new Vue({
data: {
// 声明 message 为一个空值字符串
message: ''
},
template: '<div>{{ message }}</div>'
})
// 之后设置 `message`
vm.message = 'Hello!'
如果你没有在data中声明message,Vue将警告你渲染函数试图访问的属性不存在。
4.异步更新队列
Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的
Promise.then和
MessageChannel,如果执行环境不支持,会采用
setTimeout(fn, 0)代替。
- Vue.js内部响应式原理探究
- vue源码--响应式设计原理
- Vue 响应式原理
- Vue 源码解析:深入响应式原理
- Vue.js学习 Item12 – 内部响应式原理探究
- vue 深入响应式原理
- vue笔记-----深入响应式原理
- 饿了么项目---7、深度响应式原理与Vue.$nextTick()的使用(2)
- Vue.js响应式原理
- Vue.js 进阶(1) -- 响应式原理
- Vue响应式原理详解
- Vue 响应式原理
- 浅谈Vue 数据响应式原理
- 我是怎么明白vue和ng1的响应式原理的
- 学习 vue 源码 -- 响应式原理
- Vue.js每天必学之内部响应式原理探究
- Vue响应式原理深入解析及注意事项
- Vue实现双向绑定的原理以及响应式数据
- vue 响应式原理
- Vue.2.0.5-深入响应式原理