vue2.0对象添加新的属性方法$set、object.assign()

vue2.0中在项目中常遇到一个问题就是给对象添加新的属性，但是视图却不更新问题。

一、示例：

第一步：在 data 中初始化一个对象 obj:{ name : '张三' };

data(){
    return{
        obj:{
			name:'张三'
        },
    }
}

第二步：在 template 中使用 v-for 循环该对象，并渲染出数据；

//模板
<template>
  <div class="page-body">
      <p v-for="(value,key) in obj">{
   
   {key}}-----{
   
   {value}}</p>
      <button @click="addAge">添加age</button>
      </br>
      <button @click="delAge">删除age</button>
  </div>
</template>

第三步：点击添加按钮，添加age属性；点击删除按钮，删除age属性；

created(){
	console.log(this.obj);      // {name:'张三'}
},
methods:{
	addAge(){
		this.obj.age = 15;
		console.log(this.obj);  // {age:15, name:'张三'}
    },
    delAge(){
		delete this.obj.age;
		console.log(this.obj);  // {age:15, name:'张三'}
    },
}

二、现象：

点击添加按钮时，控制台输出 { age:15, name:'张三' }；但是页面没有发生任何变化；点击删除按钮时，控制台输出 { name:'张三' }，页面没有发生任何变化；

三、分析：

原因在于vue不能检测对象新属性的添加或删除。

我们都知道，vue2.0的双向数据绑定是利⽤Object.defineProperty()来劫持各个属性的setter和getter，在数据变化时，发布消息给订阅者，从而触发相应的监听回调。

由于vue实例创建时，obj.age 并没有声明，该属性并没有被 Object.defineProperty() 劫持到，也就没有转化为响应式属性，所以当 obj.age 发生改变时，也不会触发视图更新。

四、解决办法：

此时，我们的主角登场了，那就是 vue.$set()，它可以手动的把 obj.age 处理成响应式属性，这样，视图就可以更新了。

将 this.obj.age = 15 改成 this.$set( this.obj，'age'，15 )

五、Object.assign()

当需要为对象添加多个属性时，可以用 Object.assign(target, obj1, obj2) 合并对象。target 为合并后的对象，obj1 和 obj2 为要合并的对象，当两个对象有相同的 key 时，后面的会覆盖前面的。

this.obj = Object.assign({},this.obj,{age:16,name:"张三"})

注：object.assign 是浅拷贝。

六、数组

数组中如果使用 index 来修改某一项，如 this.arr[3] = 'lisi' 这同样不是响应式的；也可以使用 set方法，this.$set( this.arr, 3, 'lisi' ) 来修改数组。

vue2.0对象添加新的属性方法$set、object.assign()

猜你喜欢