vue2和vue3响应式的区别

vue2响应式：

数据劫持:
通过defineProperty给data中所有层级的属性都添加getter和setter
getter:用于收集依赖
setter:用于监视属性值的变化，通知更新dom
收集依赖和派发更新
● 初始化data时，创建observer对象为每个data中所有层次属性都通过defineProperty添加getter/setter,也就给data中的属性添加了数据劫持，将属性变为响应式属性，为每个属性都创建一个对应的dep，用于收集依赖此属性的watcher
● 接着会创建三种watcher
○ computedWatcher,在执行render过程中，读取计算属性，执行计算属性的函数，函数内部读取data属性，执行getter，将watcher放入对应的dep中
○ userWatcher,内部会立即读取被监视的data属性，执行getter,将watcher收集到对应的dep中
○ renderWatcher,在执行render过程中，读取data属性，执行getter，将watcher收集到对应的dep中
● 当更新了data中的某个数据，派发更新dep.notify，遍历内部中所有的watcher去跟新
● 三种watcher的回调在初始化时都是同步执行的，更新时都是异步执行的

vue3响应式

● 数据劫持的实现
○ 对与ref，ref的value是通过value属性的get,set方法来实现的，当ref是引用数据时内部会对引用数据调用reactive产生proxy对象实现
○ 对与reactive，通过proxy和Reflect实现，proxy指定各种监视的回调函数，Reflect对目标对象属性进行对应的读取或更新的操作
● 收集依赖与派发更新的实现
○ 在vue3的收集依赖不在是watcher而是effect,也就是副作用函数
○ 内部有个比较复杂的结构来缓存effect函数
○ 当读取时内部会调用track来进行收集依赖
○ 当更新时内部会调用trigger来进行派发更新
● 缓存容器的结构
○ 最外层是WeakMap，key是对象，value是一个Map
○ 内层Map，key是属性名，value是set容器
○ 在内存set，是多个effect函数