本文主要介绍vue响应式数据的简易实现过程
由于我的语言组织表达能力不足，所以就只能在代码片段末尾，附上了我的个人思路。
// 发布者类
class Dep {
constructor() {
// 订阅者
this.subscribers = new Set()
}
// 收集订阅者
depend() {
if (activeEffect) {
this.subscribers.add(activeEffect)
}
}
// 通知订阅者更新数据
notify() {
this.subscribers.forEach(fun => {
fun()
})
}
}
// 用来收集订阅者
let activeEffect = null
function watchEffect(effect) {
activeEffect = effect
effect()
activeEffect = null
}
/**
* WeakMap: 用来包裹传入的对象(垃圾回收机制)
* 传入的对象：是一个map对象(用来建立对应的映射)
* map对象：每一项都是一个Dep(发布者)
*
* 也就是说：getDep函数的作用就是给每一项数据都建立一个对应的发布者
*/
const targetMap = new WeakMap()
// 用来建立对应的发布者
function getDep(target, key) {
// 根据传入的对象，获取对应的map对象
let depsMap = targetMap.get(target)
if (!depsMap) {
depsMap = new Map()
// 给对应的map对象赋值
targetMap.set(target, depsMap)
}
// 获取key属性对应的dep对象(获取key对应的发布者)
let dep = depsMap.get(key)
if (!dep) {
dep = new Dep()
depsMap.set(key, dep)
}
return dep
}
// vue2
function reactive(raw) {
Object.keys(raw).forEach(key => {
let value = raw[key]
const dep = getDep(raw, key)
Object.defineProperty(raw, key, {
get() {
// 收集依赖
dep.depend()
return value
},
set(newValue) {
value = newValue
// 通知订阅者们更新数据
dep.notify()
}
})
})
return raw
}
// vue3
// function reactive(raw) {
// return new Proxy(raw, {
// get(target, key) {
// const dep = getDep(raw, key)
// dep.depend()
// return target[key]
// },
// set(target, key, newValue) {
// const dep = getDep(raw, key)
// target[key] = newValue
// dep.notify()
// }
// })
// }
// 测试代码
const info = reactive({ name: 'summer', age: 18 })
const info2 = reactive({ height: 1.88, weight: 188 })
watchEffect(function () {
console.log('effect1', info.name, info.age)
})
watchEffect(function () {
console.log('effect2', info2.height, info2.weight)
})
info.name = 'black'
// info2.height = 1.66
/**
* 思路：
* 1. 定义变量并赋值时，对变量进行截取(reactive)，利用Object.defineProperty重写它的get和set方法
* get方法中dep.depend用于收集数据的依赖(订阅者)
* set方法中dep.notify用于通知订阅者更新数据
* 2. reactive方法中有getDep()方法的执行，getDep方法的目的是：给每个数据项建立一个对应的发布者
* 当执行这个函数的时候会传入两个参数：target目标对象，key目标对象中的属性，
* 第一次执行这个函数时，target还是普通对象，这时候将会将target转化为map对象，并且target和map-target作为targetMap的一个键值对，
* 这时候再将第一次执行的属性(target对象里的属性)的属性值都设置为dep对象(发布者)
* 3. 类Dep，用于创建发布者(dep)和收集这个发布者对应的订阅者(subscribers)的，当一个数据被重新赋值时，就通过notify通知订阅者执行，更新数据
* Dep中的depend用于收集这个发布者(数据项)对应的所有订阅者
*/
如果看完了这篇文章，对vue整个响应式流程感兴趣的话，可以看我的另一篇文章https://www.jianshu.com/p/280c45ddbc8f。
如有错误，欢迎指正！
