vue——原理——数据响应式的原理

 

数据响应式的原理

1. 所谓的数据响应式指的是数据变了,视图跟着变
2. 总结成一句话:就是利用Object.defineProperty数据劫持和观察者模式来实现的
3. 我们vue内部把data中对象进行了转换,把所有的属性递归实现了劫持Object.defineProperty,每个数据创建一个Dep被观察者
4. 对模板进行编译compiler提取里面所有的需要数据的地方变成watcher 把watch加入到对应的Dep的观察者列表中
5. 当某个data中属性变化的时候,由于被劫持了,所以vue内部是知道的,调用对应的dep去通知观察者列表中所有的观察者
6. 观察者就去更新视图

衍生问题：

1. 为什么data中数据变了,vue怎么知道? -> 数据劫持 Object.defineProperty
2. 数据变了一个,为什么组件中一堆用到这个数据的地方全变了? -> 观察者模式 这是一对多的关系
3. 为什么数据必须在data中初始化,后添加的为什么不是响应式 -> 因为vue在初始化的时候会把data中属性全部变成Object.defineProperty写法 后添加没有转换 所以就不是响应式(错过了初始化转换的时机)
4. 为什么数组的索引不是响应式的 为什么要用this.$set 来处理(vue官方基于性能的考虑,所以没有对数组进行转换,但是为我们提供了$set实现响应变化)