vue 数据改变但不渲染

Question

<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: '#app',
  data: {
    message: {
         
    },
    show:false
  },
  methods:{
    showfun(){ 
        //this.message={data:1}     //1  使用这段代码 则add方法可以增加
        this.message.data=1;        //2  使用这段代码 则add方法不能增加
        this.show=true;
    },
    add(){
        this.message.data++;
        console.log(this.message);
    }
  }
})
</script>

疑惑的地方：使用代码2 明明在add方法中看到message改变了，并且show之后 子组件也渲染了，但为什么add方法不能看到更新数据的渲染。
有什么合理的解释

Answer 1

 data: {
    message: {
        data:undefined 
    },
    show:false
  },
  

这样就可以了，因为 js 无法监听你新增属性，只能监听你修改属性，除非你开始就指定了相关属性，哪怕是 undefined.

或者你用指定的 api 去新增属性，譬如：

this.$set(this.message,'data',1)

而你用

this.message={data:1}

就是直接修改 message 属性，这个属性 vue 已经监听了，当然可以响应式。

this.message.data=1

这个因为 data 属性一开始没有，所以没有办法侦听到你对他做了修改，自然无法响应式。

https://cn.vuejs.org/v2/api/#...