vue2.0对象添加新的属性方法$set、object.assign() |
您所在的位置:网站首页 › 申请latecome要钱吗 › vue2.0对象添加新的属性方法$set、object.assign() |
vue2.0中在项目中常遇到一个问题就是给对象添加新的属性,但是视图却不更新问题。 一、示例: 第一步:在 data 中初始化一个对象 obj:{ name : '张三' }; data(){ return{ obj:{ name:'张三' }, } }第二步:在 template 中使用 v-for 循环该对象,并渲染出数据; //模板{{key}}-----{{value}} 添加age 删除age第三步:点击添加按钮,添加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' ) 来修改数组。 |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |