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

拼搏现实的明天。 2021-07-26 18:36 473阅读 0赞

# 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实例以及实例的根数据对象