Watch object problem of vue
<template>
<div>
<button @click="changeObj">click</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App",
obj: {
attr1: {},
attr2: {}
}
};
},
computed: {
attr2() {
return this.obj.attr2;
}
},
mounted() {
// this.obj = this.obj1;
},
watch: {
attr2: {
deep: true,
handler(o, v) {
console.log("change");
console.log(o);
console.log(v);
}
}
},
methods: {
changeObj() {
this.$set(this.obj, "attr3", {});
}
}
};
</script>
attr2?
attr2
watch: {
'obj.attr1': { //'.'
immediate: true,
handler(val) {
}
}
},
attr2?
I would like to talk about my superficial understanding of the first question. I hope everyone will criticize and correct what is wrong.
1. When initializing the calculation attribute attr2, the Watcher of attr2 will be collected by (dep, childOb.dep of this.obj) and (dep, childOb.dep of this.obj.attr2). This ensures that the calculation property attr2 is updated whenever the value of this.obj or this.obj.attr2 changes.
2,
this.$set(this.obj, "attr3", {});
this code triggers the notify () method of this.obj._ob_.dep (simply understand that the value of this.obj changes to trigger the update), because the first step this.obj 's childOb.dep has collected the Watcher, of the evaluation property attr2, so it triggers the update of the calculation property attr2.
3,
because
watch: {
attr2: {
deep: true,
handler(o, v) {
console.log("change");
console.log(o);
console.log(v);
}
}
},
changes in attr2 are watch here, so a callback is triggered to listen for changes in the calculation property attr2.
Note: this.obj.attr2 and the calculation property attr2 are two different properties, and the naming of the landlord is a bit confusing.
