Reactivity响应式简单实现

最简单的响应式主要只包含三个元素：Observer、Dep、Watcher

• Observer：递归地监听对象上的所有属性，在属性值改变的时候，触发相应的watcher
• Watcher：观察者，当监听的数据值修改时，执行响应的回调函数（Vue里面的更新模板内容）
• Dep：连接Observer和Watcher的桥梁，每一个Observer对应一个Dep，它内部维护一个数组，保存与该Observer相关的Watcher

function Observer(target, key, value) {
	let dep = new Dep()
	if (Object.prototype.toString.call(value) == '[object Object]') Reflect.ownKeys(value).forEach((key) => new Observer(value, key, value[key]))
	Object.defineProperty(target, key, {
		enumerable: true,
		configurable: false,
		get() {
			Dep.target && dep.addSub(Dep.target) // 订阅
			return value
		},
		set(newVal) {
			dep.notify() // 通知
			value = newVal
		},
	})
}
class Dep {
	constructor() {
		this.subs = [] // watchers数组
	}
	addSub(watcher) {
		!this.subs.includes(watcher) && this.subs.push(watcher) // 避免重复收集
	}
	notify() {
		this.subs.forEach((watcher) => watcher.update())
	}
}
class Watcher {
	// 观察者模式
	constructor(renderCb) {
		this.renderCb = renderCb
	}
	update() {
		Dep.target = this
		this.renderCb()
		Dep.target = null
	}
}

官方原理图如下

// 测试
let app = document.getElementById('app')
let vm = {
	data: {
		id: 1007,
		goods: { price: 1 },
	},
}
let ob = new Observer(vm, 'data', vm.data)
let watcher = new Watcher(() => (app.innerHTML = vm.data.goods.price))
watcher.update()

let btn = document.getElementById('btn')
btn.onclick = () => vm.data.goods.price++

对照测试示例如下