一个对象被修改,内部其实首先会收集该对象的所有依赖,通过Proxy检测到变化时再去执行所有依赖
响应式函数的引出:
let nongqing = '弄晴'
// 当nongqing改变时
nongqing = 'nq'
// 执行以下代码
console.log(1)
console.log(2)
...
console.log(99)
...
// 要执行的代码可能有很多,每次写都很麻烦,我们可以把要执行的代码放到函数中管理
// 那怎么判断函数是要进行响应式还是非响应式的呢
// 我们可以定义一个函数,凡是传入这个函数的函数都是需要响应式的函数
let reactiveFn = null
function watchFn(fn) {
// 函数的参数为一个函数
reactiveFn = fn
fn()
// 防止污染其它的依赖收集
reactiveFn = null
}
响应式函数的收集:
在实际开发中我们要监听很多的对象变化,每一个对象的每一个属性都会有自己的响应式函数
那这些响应式函数该怎么来存储呢?
首先让我们封装一个类
class Depend {
constructor(){
// 存放所有的响应式函数
this.reactiveFns = []
}
// 添加响应式函数
addDepend(fn){
this.reactiveFns.push(fn)
}
// 执行响应式函数
notify(){
this.reactiveFns.forEach(fn => {
fn()
})
}
}
// 封装一个函数用来得到一个对象的一个属性的唯一一个依赖
// 怎么保证依赖的唯一性就是考虑数据管理的问题
const targetMap = new WeakMap()
function getDepend(target,key) {
let map = targetMap.get(target)
if(!map) {
map = new Map()
targetMap.set(target,map)
}
let depend = map.get(key)
if(!depend) {
depend = new Depend()
targetMap.set(key,depend)
}
return depend
}
Proxy进行监测:
let obj = {
name: 'nq',
age: 18,
hobby: [ '篮球' ]
}
let objProxy = new Proxy(obj,{
get(target,key,reciver) {
const depend = getDepend(target,key)
// 收集依赖
depend.addDepend(reactiveFn)
return Reflect.get(target,key,reciver)
},
set(target,key,value,reciver) {
Reflect.set(target,key,value,reciver)
const depend = getDepend(target,key)
depend.notify()
}
})
以上就是响应式原理实现过程,但会有许多bug,比如函数中有用到两次key,比如name,那么这个函数会被收集两次;我们并不希望将添加reactiveFn放到get中,以为它是属于Dep的行为
需要对depend进行优化处理。具体优化在这里就不展开了大家可以自己思考一下。