vue源码- getter setter 依赖跟踪

依赖跟踪

首先创建一个叫Dep的类

类有两个方法
depend和notify
depend表示当前正在执行的代码，收集这种依赖项
notify表示依赖发生改变，任何之前被定义过的表达式，计算，函数都会被通知重新执行，所以我们就需要一个函数或者一段表达式或者某种算法让他们产生关联，并且可以把这种关系叫做依赖，也可以被认为是订阅者模式
还有一个叫函数autorun
接受一个update函数，函数体中属于响应区间

创建一个dep实例
const dep = new Dep()

autorun(() => {
// 把这个函数添加到订阅者列表dep中
	dep.depend()
	console.log('update')
})
// 之后在任何地方调用了notify 我们不需要修改autorun或者做其他操作
dep.notify()
// 每次调用dep.notify()后autorun这个函数就会被触发

window.dep = class dep{
// 创建一个构造函数
	construction() {
	// subscribers 记录订阅者
		this.subscribers = new Set()
	}
	depend() {
		if (activeUpdate) {
		this.subscribers.add(activeUpdate)
			// 注册这个activeUpdate
			// 把activeUpdate作为订阅者
		}
	},
	notify() {
		// 通知所有订阅者functions
		this.activeUpdate.forEach(sub => sub())
	}
}
let activeUpdate
// 确保内部udate函数执行的时候我们的依赖类可以访问这个activeUpdate

function autorun(update) {
	// 当依赖关系发生改变update函数会重新执行，之后值在改变wrappedUpdate会不停收集依赖项
	function wrappedUpdate(){
		activeUpdate = wrappedUpdate
		update()
		activeUpdate = null
	}
}
autorun(() => {
	dep.depend()
})

看了个有意思的视频，这是观后感，先记录下来，大家有感兴趣的或者有什么觉得不对的可以随时私我，祝大家越来越棒