測試1.未在data內註冊的變數沒有響應式，不具備響應式的變數值變化不會觸發頁面重新渲染

檢視始終是 count：0，a:1；

<template>
  <div id="welcome">
    <!-- data內註冊的變數才會具有響應式 -->
    <div>count:{{count}}</div>
    <div>a:{{a}}</div>
  </div>
</template>

<script>
export default {
    data(){
        return {
          count:0
        }
    },
    created(){
    //建立變數a為1，
      this.a=1
    },
    mounted(){
       setTimeout(()=>{
             this.a=99
             console.log(this.count); // 0
             console.log(this.a);     //99
         },1000)
    }
}

</script>
 

測試2.在data內註冊的變數具有響應式，具備響應式的值變化觸發頁面重新渲染

檢視由 count：0 ，a:1 變為 count：99，a:99；

<template>
  <div id="welcome">
    <!-- data內註冊的變數才會具有響應式 -->
    <div>count:{{count}}</div>
    <div>a:{{a}}</div>
  </div>
</template>

<script>
export default {
    data(){
        return {
          count:0
        }
    },
    created(){
    //建立變數a為1，
      this.a=1
    },
    mounted(){
       setTimeout(()=>{
             this.a=99
             this.count=99  
             console.log(this.count); //99
             console.log(this.a);     //99
         },1000)
    }
}
</script>