vue响应式原理初探

vue响应式原理初探

<script>
	const obj = {
	name:'zhangsan',
	age:10
}
</script>

1.对数据的监听 defineProperty

Object.key(obj).forEach(key => {
	let value = obj[key];
	Object.defineProperty(obj,key,{
		set(newValue){
			console.log('监听到了')
			value = newValue;
		}
		get(){
			return value;
		}
	})
})

当对obj的数据进行修改时，会进入defineProperty的set方法中。
当dom中有地方使用了这个数据，则会调用defineProperty的get方法。

2.对数据的修改 发布者订阅者模式
发布者：

class Dep {
	constructor() {
		this.subs = [];
	}
	addSub(watcher) {
		this.subs.push(watcher)
	}
	notify() {
		this.subs.forEach(item => {
			item.update();
		})
	}
	
}
订阅者：
class Watcher {
	constructor(name) {
		this.name = name;
	}
	update() {
		console.log(this.name + '更新了')
	}
}