示例:
方式一
方式二
export default {
data() {
return {
p: {
a: 1
}
}
},
methods: {
fun1() {
console.log('click 1111')
// this.p.b = 2 // 通过点方法赋值,发现观察不到p的变化
this.$set(this.p, 'b', 2) // 第一种解决方式,可以查看日志看到已经监听到了变化
},
fun2() {
console.log('click 2222')
this.p = Object.assign({}, this.p, { c: 3 }) // 第二种解决方式,可以查看日志看到已经监听到了变化
}
},
watch: {
p: {
handler(cval, oval) {
console.log('--------')
console.log(cval, oval)
},
deep: true
}
}
}
vue中对对象的监控不能检测到对象属性的添加或删除
对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性。但是,可以使用Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性。
有时你可能需要为已有对象赋值多个新属性,可以使用Object.assign()