vue响应式测试

测试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>

vue响应式测试

原文：https://www.cnblogs.com/xjt31/p/13985620.html