vue watch 经常监听不到_vue watch监听不到对象属性的变化的情况

示例：

方式一

方式二

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()