首先上一段代码：
const obj = { age: 1 } // 定义一个对象
let age = obj.age // 将对象的age属性赋值给一个变量
obj.age++ // 对象的age属性发生了变化
console.log(`age=${age}`, obj); // 输出结果： age = 1 {age: 2}在obj的age属性变化时，变量age如果也随之变化，通常就需要定义一个函数赋予改变逻辑，在每次变化时手动执行一下函数。下面将以vue3中的响应式设计作为参考，来实现一个能自动响应方法。
创建Demo
在Vue3中，数据响应模块被独立拆分了出来，现在我们可以随意创建一个node项目，然后npm或yarn安装包@vue/reactivity，这个包中有两个关键函数，reactive 和 effect，分别是创建一个响应式的对象和数据发生改变时的监听方法：
使用包引入的函数，修改了上面的例子，满足了响应式需求，外部定义的变量跟随对象一起改变，打印出两个数值一致：
const { reactive, effect } = require('@vue/reactivity')
const obj = reactive({ age: 1 }) // 这样就创建了一个响应式的对象
let _age
effect(() => { // 对象变化时的监听响应操作，这里执行了两次
_age = obj.age
console.log(`I'm ${_age} years old`);
})
obj.age++ // 操作对象，数据随之响应
console.log(_age, obj); // 结果： 2 { age: 2 }模拟实现基本的Reacticity
/**
* 1. 收集依赖 2. 触发通知
*/
class Dep {
constructor(val) {
this.effects = new Set()
this._val = val
}
get value() {
return this._val
}
set value(newVal) {
this._val = newVal
}
depend() {
// 依赖收集...
}
notify() {
// 触发通知...
}
}
function effectWatch(effect) {}代码结构已有，先从结果出发，来看一个测试用例，假设从基本数据类型开始：
// Test
const hero = new Dep(1) // 传入一个数值
let lv
effectWatch(() => { // 响应对象的变动执行函数
lv = hero.value
console.log(`等级提升： ${lv}`); // 期望结果 .. 等级提升:2
})
setTimeout(() => {
hero.value++
}, 1000);照着上面的例子创建了这样一个英雄升级的例子，这里期望的运行结果应该是打印出 等级提升:2 这样的结果，开始完善函数：
class Dep {
effects: any
val: any
constructor(val: any) {
this.effects = new Set()
this.val = val
}
get value() {
this.depend() // get中开始收集依赖
return this.val
}
set value(newVal) {
if (newVal !== this.val) {
this.val = newVal
this.notify() // 在set中触发通知
}
}
depend() { // 收集依赖
if (Dep.currentEffect) {
this.effects.add(Dep.currentEffect)
Dep.currentEffect = null
}
}
notify() { // 执行依赖
this.effects.forEach((effect: Function) => effect())
}
static currentEffect: any
static trigger(e: Function) {
Dep.currentEffect = e
}
}
function effectWatch(effect: Function): void {
effect() // 模仿了vue3的effect函数，会先执行一次
Dep.trigger(effect) // 提交给依赖收集器
}这里经历了一点小插曲。。在收集依赖定义中间变量currentEffect时想用下静态属性，一直报错(要么这个变量在类的外部定义就可以)，搜索一番后发现class的静态属性还只是个提案？还是我这node10版本太低了？那么，面向未来开发，yarn global add typescript + yarn global add ts-node一顿操作后运行tsc --init，然后在生成的json里修改指向es6："target": "es2015"，使用ts-node指令运行，代码结构还是那样，主要完善了在get set中收集和触发依赖，再运行测试用例，成功输出：
// Test
运行上面的Test代码
.....
等级提升： 1
等级提升： 2看到这里，我们已经实现了基本数据类型的响应式代码，而对象操作这种更为复杂的数据，就需要使用到ES6新特性代理相关的知识了.
响应式对象
基本数据类型的reactive实现了，接下来实现对象的处理，还是之前Vue3的例子，不同的是将导入的两个函数变成自己实现的：
// const { reactive, effect } = require('@vue/reactivity')
const { reactive, effect } = require('./reactivity')
const obj = reactive({ age: 1 }) // 创建了一个响应式的对象
.... 省略
obj.age++ // 操作对象，数据随之响应
console.log(_age, obj); // 结果： 2 { age: 2 }那么现在就差reactive这个函数的实现了，继续上面的代码：
class Dep {
....
}
function effectWatch(effect: Function): void {
....
}
// 因为改成ts所以这里node环境也直接用es6的export了
export const effect = effectWatch
export function reactive(target: any) {
return new Proxy(target, {
get(target: any, key: string | symbol) {
return Reflect.get(target, key)
},
set(target: any, key: string | symbol, value: any) {
return Reflect.set(target, key, value)
}
})
}代码结构出来了，可以看出Proxy和Reflect其实没有那么神秘，有着同样的api参数使用也都一致，Proxy可以帮助解析对象，在这里实现了类似递归的效果，接下来就是要在Proxy中绑定Dep实例并且去触发依赖收集。先来定义一个函数存取实例：
const targetMaps = new Map() // 这里数据结构采用Map，因为用对象的话键名会被格式化成字符串
function getDep(target: any, key: string | symbol) {
const deps = targetMaps.get(target) || new Map()
targetMaps.set(target, deps)
const dep = deps.get(key) || new Dep()
deps.set(key, dep)
return dep
}接着就可以在reactive中使用getDep这个方法：
export function reactive(target: any) {
return new Proxy(target, {
get(target: any, key: string | symbol) {
const dep = getDep(target, key) // 获取属性对应Dep实例
dep.depend() // 触发收集依赖
return Reflect.get(target, key)
},
set(target: any, key: string | symbol, value: any) {
const dep = getDep(target, key)
const result = Reflect.set(target, key, value)
result && dep.notify() // 数据有变化时去通知
return result
}
})
}运行上面改成导入自己包的测试用例，看看运行结果是否与Vue3的例子一致。
附上 reactivity.ts 完整代码
class Dep {
effects: any
val: any
constructor(val: any = '') {
this.effects = new Set()
this.val = val
}
get value() {
this.depend() // get中开始收集依赖
return this.val
}
set value(newVal) {
if (newVal !== this.val) {
this.val = newVal
this.notify() // 在set中触发通知
}
}
depend() {
if (Dep.currentEffect) {
this.effects.add(Dep.currentEffect)
Dep.currentEffect = null
}
}
notify() {
this.effects.forEach((effect: Function) => effect())
}
static currentEffect: any
static trigger(e: Function) {
Dep.currentEffect = e
}
}
function effectWatch(effect: Function): void {
effect() // 模仿了vue3的effect函数，会先执行一次
Dep.trigger(effect)
}
export const effect = effectWatch
const targetMaps = new Map()
function getDep(target: any, key: string | symbol) {
const deps = targetMaps.get(target) || new Map()
targetMaps.set(target, deps)
const dep = deps.get(key) || new Dep()
deps.set(key, dep)
return dep
}
export function reactive(target: any) {
return new Proxy(target, {
get(target: any, key: string | symbol) {
const dep = getDep(target, key)
dep.depend()
return Reflect.get(target, key)
},
set(target: any, key: string | symbol, value: any) {
const dep = getDep(target, key)
const result = Reflect.set(target, key, value)
result && dep.notify()
return result
}
})
}