Vue2中数据监测原理

Vue2中数据监测原理

Vue2中数据监测原理的简单模拟

1. Vue2中主要是利用了Object.defineProperty方法实现的数据监测，通过为data中的每一个属性添加getter和setter，就可以实现数据的变动监测，并给出反馈
2. Vue数据监测的简单模拟

//创建一个监视构造函数
function Observer(obj){
	//遍历对象中所有的属性形成一个数组keys
	const keys = Object.keys(obj);
	keys.forEach((k)=>{
		console.log(this);
	/*箭头函数的this指向其定义时所在函数作用域的this指向，
	而不是调用时所在函数作用域的this指向,此时箭头函数是作为
	forEach方法的实参传递的，其定义是在函数Observer中，
	所以此时的this指向ObServer被调用时this的指向，
	在本案例中指向obs实例对象*/
	
	//将obj中的每一个属性都添加到监视对象上，并为其配置getter和setter
		Object.defineProperty(this,k,{
		    get(){
		        return obj[k];
		    },
		    
		    set(val){
		        obj[k] = val;
		        console.log(k+"被修改了，我要去解析模板，生成虚拟DOM了");
		    }
		});
	});

}


//准备一个对象，用于模拟Vue的配置对象data
let data = {
   name:"尚硅谷",
   adress:"北京",
}

//通过监视实例对象创建一个监视的实例对象，用于监视data中属性的变化
const obs = new Observer(data);//obs

//准备一个vm实例对象,用于模拟Vue的实例对象vm
let vm={}
//让vm._data和data都指向监视对象obs，这样改变三个对象中的哪一个对象的属性都能被监视到变动
vm._data = data = obs;

Vue2中数据监测总结

1. Vue会监测到配置时添加的data中的所有层次的数据；
2. Vue如何监测对象中的数据
   (1) 通过setter实现对象中的数据监测，且要在new Vue时就传入需要监测的数据,在new Vue后传入的数据Vue默认不做响应式处理
   (2)若需要使得在new Vue后添加的属性是响应式的，需要使用如下API：

Vue.set(target,propertyName/index,value)
vm.$set(target,propertyName/index,value)

3. Vue如何监测数组中的数据？
   通过包裹数组更新元素的方法实现数组中的数据监测，本质上是做了两件事：
   (1)调用原生数组对应的方法对数组本身数据进行更新
   (2)重新解析模板，进而更新页面
4. 在Vue中修改数组中的某个对象时一定要使用到如下方法

   (1)、使用会变更数组的API:push()、pop()、shift()、unshift()、splice()、sort()、reverse();
   (2)、Vue.set()、vm.$set()

5. 若使用不会变更数组的API(如filter,concat等)，他们会返回一个新的数组，可以将返回的新数组替换旧的数组，这样也可以像使用了会变更数组的API一样实现数组的响应式更新
6. Vue中数组嵌套了对象时，只有改变数组或者改变数组内对象的属性时才会被监听到，直接改变数组内对象的指向时不能被Vue监测到
7. 特别注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象(data、_data)添加属性！！！添加了会报错