怎么给Vue对象增加响应式属性
导读:本文共1677字符,通常情况下阅读需要6分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要:Vue.$set给对象新增属性Vue.$set()Object.assign()$set()方法不生效时,改用Object.assign()试试vue代码中,只要在data对象里定义的对象,赋值后,任意一个属性值发生变化,视图都会实时变化比如下面在data定义了obj对象,mounted里赋值后,(也可以在其他地方赋值)只要obj.a或者obj.b的值改变了,视图会跟着变化。data(){ ... ...
目录
(为您整理了一些要点),点击可以直达。Vue.$set给对象新增属性
Vue.$set()
Object.assign()
$set()方法不生效时,改用Object.assign()试试
vue代码中,只要在data对象里定义的对象,赋值后,任意一个属性值发生变化,视图都会实时变化
比如下面在data定义了obj对象,mounted里赋值后,(也可以在其他地方赋值)只要obj.a或者obj.b的值改变了,视图会跟着变化。
data(){ return{ obj:{}
}
},mounted:{ this.obj={a:1,b:2}//改变this.obj.athis.obj.c的值视图会更新
this.obj.c=3//改变this.obj.c的值视图不会更新
Object.assign(this.obj,{d:4})//改变this.obj.c的值视图不会更新
this.$set(this.obj,'e',5)//改百年this.obj.e时视图会更新
console.log('obj'+this.obj)
}
但是我们在obj对象上新增的属性变化时,值会变化,但是视图不会实时变化
比如obj.c或者obj.d变化时,值虽然会变,但是视图不会跟着变
Vue.$set()
使用Vue.$set()方法,既可以新增属性,又可以触发视图更新,比如obj.e改变时,视图会相应改变
打印出的obj,可以看出,新增的属性只有通过this.set()的obj.e属性有get和set方法的,而新增的obj.c和obj.d没有
根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
当我们把一个JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty把这些属性全部转为 getter/setter。
Object.assign()
给data定义的对象新增属性,同时又要视图实时更新,除了用Vue.$set()方法,也可以通过Object.assign()实现
data(){ return{ obj:{}
}
},mounted:{ this.obj={a:1,b:2}this.obj.c=3
Object.assign(this.obj,{d:4})//this.$set(this.obj,'e',5)//下面这一行代码才触发了视图更新
this.obj=Object.assign({},this.obj,{e:5})console.log("obj",this.obj)
}
以上的代码等同于
data(){ return{ obj:{}
}
},mounted:{ this.obj={a:1,b:2,c:3,d:4,e:5}
}
$set()方法不生效时,改用Object.assign()试试
使用this.$set()去改变一个传入组件的对象(没有直接定义在data对象中,通过mixins选项做相关操作,能够通过this.去获取),没有触发视图更新
而改用Object.assign()去给对象重新赋值时,会触发视图更新
通过重新给对象赋值,来使视图更新;
使用Object.assign()新增,或者改变原有对象,
//起作用的是给对象重新赋值this.obj=Object.assign({},this.obj,{e:5})
怎么给Vue对象增加响应式属性的详细内容,希望对您有所帮助,信息来源于网络。