Vue-响应式数据

响应式数据

　　所谓的响应式数据就是如果内存中的数据变化了 页面UI也会动态跟着刷新  这种数据就是响应式数据

Vue实现响应数据的原理

　　vue2.0 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

　　vue3.0 --使用es6 proxy 代理了data对象

Vue实现响应式数据的源代码

function MyVue(option){
		let _myvm={}
		//劫持
		let arr=Object.keys(option.data)
		for(let i=0;i<arr.length;i++){
			 Object.defineProperty(_myvm,arr[i],{
			 set(v){
			 //劫持
			 option.data[arr[i]]=v
			 //响应-刷新页面
			 let title=document.querySelector(option.el+" #title")
			 let msg=document.querySelector(option.el+" #msg")
			 title.innerHTML=_myvm["title"]
			 msg.innerHTML=_myvm["msg"]
			 },
			 get(){
				 return option.data[arr[i]]
			 }
		 })
	 _myvm[arr[i]]=option.data[arr[i]]
					 
}
				
												
　　return _myvm
}