Vue.js 3.0 响应式系统的实现原理和方式

vue3.0 建立响应式的方法有两种：

• 第一个就是运用composition-api中的reactive直接构建响应式，composition-api的出现我们可以在.vue文件中，直接用setup()函数来处理之前的大部分逻辑，也就是说我们没有必要在 export default{ } 中在声明生命周期 ， data(){} 函数，watch{} , computed{} 等 ，取而代之的是我们在setup函数中，用vue3.0 reactive watch 生命周期api来到达同样的效果，这样就像react-hooks一样提升代码的复用率，逻辑性更强。
• 第二个就是用传统的 data(){ return{} } 形式 ,vue3.0没有放弃对vue2.0写法的支持，而是对vue2.0的写法是完全兼容的，提供了applyOptions 来处理options形式的vue组件。但是options里面的data , watch , computed等处理逻辑，还是用了composition-api中的API对应处理。

vue3.0可以根据业务需求引进不同的API方法:

• reactive
  建立响应式reactive，返回proxy对象，这个reactive可以深层次递归，也就是如果发现展开的属性值是引用类型的而且被引用，还会用reactive递归处理。而且属性是可以被修改的。
• shallowReactive
  建立响应式shallowReactive，返回proxy对象。和reactive的区别是只建立一层的响应式，也就是说如果发现展开属性是引用类型也不会递归。
• readonly 返回的proxy处理的对象，可以展开递归处理，但是属性是只读的，不能修改。可以做props传递给子组件使用。
• shallowReadonly
  返回经过处理的proxy对象，但是建立响应式属性是只读的，不展开引用也不递归转换，可以这用于为有状态组件创建props代理对象。

Reactive

1、reactive:

接收一个参数，判断这参数是否是对象。不是对象则直接返回这个参数，不做响应式处理创建拦截器对象 handler, 设置 get/set/deleteProperty

get：

• 收集依赖（track）
• 返回当前 key 的值。
• 如果当前 key 的值是对象，则为当前 key 的对象创建拦截器 handler, 设置 get/set/deleteProperty
• 如果当前的 key 的值不是对象，则返回当前 key 的值

set：

• 设置的新值和老值不相等时，更新为新值，并触发更新（trigger） deleteProperty
• 当前对象有这个 key 的时候，删除这个 key 并触发更新（trigger） 返回 Proxy 对象

2、effect: 接收一个函数作为参数。作用是：访问响应式对象属性时去收集依赖

3、track:

• 接收两个参数：target 和 key
• 如果没有 activeEffect，则说明没有创建 effect 依赖
• 如果有 activeEffect，则去判断 WeakMap 集合中是否有 target 属性， WeakMap 集合中没有 target
  属性，则 set(target, (depsMap = new Map()))
• WeakMap 集合中有 target 属性，则判断 target 属性的 map 值的 depsMap 中是否有 key 属性depsMap 中没有 key 属性，则 set(key, (dep = new Set())) depsMap 中有 key属性，则添加这个 activeEffect

4、trigger:

• 判断 WeakMap 中是否有 target 属性
• WeakMap 中没有 target 属性，则没有 target 相应的依赖
• WeakMap 中有 target 属性，则判断 target 属性的 map 值中是否有 key 属性，有的话循环触发收集的
  effect()

参考链接：https://blog.csdn.net/qq_35469739/article/details/108755888