<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
{{message}}
<blog-post v-if="show" :count="message"></blog-post>
<button @click="showfun()">show</button>
<button @click="add()">add</button> </div>
</div>
<script>
Vue.component("blog-post", {
props: ["count"],
template: "<div> {{count}} </div>",
})
new Vue({
el: "-sharpapp",
data: {
message: {
},
show:false
},
methods:{
showfun(){
//this.message={data:1} //1 add
this.message.data=1; //2 add
this.show=true;
},
add(){
this.message.dataPP;
console.log(this.message);
}
}
})
</script>
confusion: using code 2, you can clearly see that the message has changed in the add method, and the subcomponents have rendered after the show, but why the add method can"t see the rendering of the updated data.
is there any reasonable explanation