数据响应式原理

数据响应式的原理 数据发生变化 数据依赖的组件就会重新更新

Vue怎么实现数据变化视图也跟着变化呢？ 数据劫持

1 劫持数据不可被外界枚举，删除，改写 2get和set方法

手写响应式

// 数据响应式式的原理 // 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实现响应变化) https://www.cnblogs.com/vickylinj/p/14370084.html

把普通对象劫持 这就是vue中要在data中声明响应式变量的原因

数组是可以被劫持的 但vue里不可以

下边的两个图本质没有区别