Vue.set() 用于向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。
示例:
<div @click="addInfo()">添加信息</div>
<div>用户ID:{{user.id}}</div>
<div>姓名:{{user.name}}</div>
<div>电话号码:{{user.phone}}</div>
<div>地址:{{user.address}}</div>
- 添加响应式属性:
Vue.set(this.user, "address", "广州市天河区")
或
this.$set(this.user, "address", "广州市天河区")
- 添加普通属性:
this.user.phone = "18900000000"
添加后 address 是响应式对象,有创建数据代理,界面会随着改变而更新,phone 无数据代理,数据变化后不会触发界面更新。
- 同时增加响应式和非响应式属性
this.$set(this.user, "address", "广州市天河区")
this.user.phone = "18900000000"
虽然 phone 是非响应式属性,但 address 是响应式属性,address 改变后触发界面更新,非响应式的属性 phone 也会同时更新。