vue2 响应式原理

 vue 的响应式是基于 Object.defineProperty() 函数进行数据劫持来实现给对象的每一个属性都添加 get 、set 方法来实现响应式

//订阅器模型
let Dep={
	clientList:{},//容器
	//添加订阅
	listen:function(key,fn){
		///短路表达式
		(this.clientList[key]|| (this.clientList[key]=[])).push(fn);
	}
	//发布
	trigger:function(){
		let key=Array.prototype.shift.call(arguments),
		fns=this.clientList[key];
		if(!fns||fns.length===0){
			return false;
		}
		for(let i=0,fn;fn=fns[i++];){
			fn.apply(this,arguments)
		}
	}
}

///数据劫持
let dataHi=function({data,tag,datakey,selector}){
	let value='',el=document.querySelector(selector);
	
	Object.defineProperty(data,datakey,{
		//取值
		get:function(){
			console.log('取值')
			return value;
		}
		set:function(val){
			console.log('设置值')
			value=val;
			//发布
			Dep.trigger(tag,val)
		}
	})
	
	//订阅器
	Dep.listen(tag,function(text){
		el.innerHTML=text	
	})
}