Vue知识回顾与总结【四】vm.$set和vm.$delete

Vue知识回顾与总结【四】

vm.$set

用法回顾

vm.$set()相信使用vue的人都不陌生，主要用于解决对象新增属性，删除属性时数据无法侦测问题，以及通过索引操作数组元素数据无法侦测的问题。用法如下：

vm.$set( target,key ,value )

实现原理

• 在Vue.js的原型上设置$set属性，所有以**vm.$**开头的方法都是在Vue.js的原型中实现的。

处理数组

如果target是一个数组，且key为有效的数组索引，先判断传入的索引值是否大于数组length，如果可以比数组length大，那么就令目标数组的length等于可以，接下来使用splice（重写后的拦截器方法）将value设置到target数组中。如果key已经存在，那么直接用value替换原数值即可。

• 也就是说vm.$set()的核心是使用splice方法为数组添加元素

处理对象属性新增

• target不能是Vue.js实例 vm ,或者Vue.js实例的根数据对象 this.$data
• 如果target并非响应式数据，即target身上没有_ob_属性，说明其并非响应式的，此时无需做任何处理，只需将key,value设置到target身上即可。
• 如果target是响应式数据，即身上有_ob_属性。那么在位target新增属性key时，同时要让属性key也是可侦测的，即通过defineReactive 将新增属性key转换成响应式数据即可。

vm.$delete

和 vm.$set() 相反，vm.$delete 用于删除对象身上的某个属性。由于Vue2.0使用Object.defineProperty()实现变化侦测，故而无法侦测到对象属性的删除，Vue.js提供了vm.$set()方法删除数据的某个属性。

基本用法回顾

vm.$delete( target,key )

实现原理

• 删除属性后向依赖发送通知，源码如下

Vue.prototype.$delete = function(target,key){
  // 处理数组调用splice方法
  	if(Array.isArray(target)&& isValidArrayIndex(key)){
		target.splice(key,1);   //splice会自动触发依赖通知
		return;
	}
	//处理对象属性
	const ob = target._ob_;
	delete target[key];
	ob.dep.notify();   //通知依赖
}

• vm.$delete同样不能操作Vue.js实例以及实例的根数据对象