vue2.0对象添加新的属性方法$set、object.assign()
我们都知道,vue2.0的双向数据绑定是利⽤Object.defineProperty()来劫持各个属性的setter和getter,在数据变化时,发布消息给订阅者,从而触发相应的监听回调。vue.$set(),它可以手动的把 obj.age 处理成响应式属性,这样,视图就可以更新了。Object.assign(target, obj1, obj2) 合并对象数组中如果使用 index 来修改某一
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' ) 来修改数组。
更多推荐
所有评论(0)