前言

Vue的响应式系统是基于数据劫持加发布订阅者模式实现的，数据响应式就是建立响应式数据与依赖的关系 (调用了响应式数据的操作之间的关系)
vue2使用Object.defineProperty进行数据拦截,而Vue3使用Proxy进行数据拦截是es6中新加的api,比Object.defineProperty解除了很多限制,性能更加优秀

Proxy

利用Proxy代理对象进行数据劫持

Proxy的基本使用

const testobj= { count: 0 };
const proxy = new Proxy(testobj, {
get(target, key) {
console.log('触发get')
return Reflect.get(target, key)
},
set(target, key, value) {
console.log('触发set')
return Reflect.set(target, key, value)
},
});
console.log(proxy.count) // 触发get
proxy.count = 1 // 触发set

在Vue3中,会通过拦截 get 和 set 操作来实现依赖收集和触发依赖。当我们访问响应式对象的属性时，会触发 get 操作，此时 Vue3 会将当前的依赖(effect)项添加到依赖列表中；当我们修改响应式对象的属性时，会触发 set 操作，此时 Vue3 会遍历依赖列表，调用每个依赖项的更新函数，对视图进行更新。

所以先定义依赖类,需要有数据结构来存储依赖,

effect副作用函数,这个函数在响应式数据发生变化时会被自动触发，从而执行相关的操作。可以完善effect副作用函数来控制响应式数据

// 定义的依赖类
class ReactiveEffect{private _fn_;constructor(fn){this._fn_ = fn}run(){activeEffect = thisthis._fn_()}
}
let activeEffect;
//effect副函数
//传入一个直接执行的函数
function effect(fn){const _effect = new ReactiveEffect(fn)_effect.run()
}

当访问响应式对象的属性时，会添加一个依赖项，并将当前的 activeEffect 类保存到一个 effects 集合中，而 effects 集合则以 target 对象为键，以保存在该对象上的依赖项的列表为值。这也就是track收集依赖。

为什么用WeakMap做数据结构呢？weakMap重要在它的弱字,WeakMap 中的键是弱引用的,意味着，当键不再被其他地方引用时，垃圾回收器可以自动清除这些键对应的值。可以优化性能

const targetMap = new WeakMap()//收集依赖function track(target, key) {let depsMap = targetMap.get(target)if (!depsMap) {depsMap = new Map()targetMap.set(target, depsMap)}let dep = depsMap.get(key);if (!dep) {dep = new Set()depsMap.set(key, dep)}dep.add(activeEffect)
}
//简化下代码
function track(target, key) {const depsMap = targetMap.get(target) || new Map();targetMap.set(target, depsMap);const dep = depsMap.get(key) || new Set();depsMap.set(key, dep);dep.add(activeEffect);}

trigger触发依赖是当响应式对象属性修改时,系统会遍历依赖项列表，逐个执行保存在其中的 activeEffect 类，代表了对应依赖项的操作。

function trigger(target,key) {const depsMap = targetMap.get(target)const deps = depsMap.get(key)for(const effect of deps){effect.run()}
}

这下可以根据上述实现一波reactive实现

let activeEffect;
function isObject(raw) {
if (raw === null) {
return false
} else if (typeof raw === 'object' || typeof raw === 'function') {
return true
} else {
return false
}
}
function reactive(raw){if (!isObject(raw)) {console.warn(`${raw} not object`)return raw}return new Proxy(raw,{get(target, key) {const res =Reflect.get(target, key)track(target,key)return res},set(target,key,value){const res = Reflect.set(target, key, value)trigger(target,key,value)return res //这是个布尔值}		})
}
//实现依赖类和effect函数
class ReactiveEffect{_fn_;constructor(fn){this._fn_ = fn}run(){activeEffect = this;this._fn_();}}function effect(fn){const _effect = new ReactiveEffect(fn)_effect.run()}
const targetMap = new WeakMap()//收集依赖
function track(target, key) {let depsMap = targetMap.get(target)if (!depsMap) {depsMap = new Map()targetMap.set(target, depsMap)}let dep = depsMap.get(key);if (!dep) {dep = new Set()depsMap.set(key, dep)}dep.add(activeEffect)}//触发依赖
function trigger(target,key) {const depsMap = targetMap.get(target)const deps = depsMap.get(key)for(const effect of deps){effect.run()
}
}