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' ) 来修改数组。

Logo

前往低代码交流专区

更多推荐