vue的响应式

数据劫持 依赖追踪 实现视图数据实时联动

vue2

1.数据劫持 vue Object.defineProperty

定义每个属性的 get 和 set

get 读取数据实现收集依赖 wacther

set 修改数据通知依赖更新

  1. 依赖收集

    dep 存储依赖该属性所有1wacth

    属性被访问，把wacth添加到dep中

    1. 通知更新

      属性变化是，触达set，dep通知所有wacth执行更新逻辑

    vue3

    1 改用 ES6 的 Proxy 实现数据劫持

    不仅可以实现数据劫持，监听动态的属性添加和删除

    还能支持数组，map，set等复制数据结构的监控

    2 reactive

    ref

    3 依赖追踪和触发更新

    effect 函数收集依赖