1. <body>
    2.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    3.     <div id='myApp'>
    4.         <h1 ref="h1">{{name}}</h1>
    5.     </div>
    6.     <script>
    7.         new Vue({
    8.             el: '#myApp',
    9.             data: {
    10.                 name: '张三'
    11.             },
    12.             mounted() {
    13.                 this.name = "李四";
    14.                 console.log(1, this.name, this.$refs.h1.innerText)//1 李四 张三
    15.                 this.name = "小明";
    16.                 console.log(2, this.name, this.$refs.h1.innerText)//2 小明 张三
    18.                 // 当vue中data数据更新后, DOM更新并及时, 因为虚拟DOM执行计算和操作更新属于异步更新, 每一次dom的更新都需要在异步更新队列中等待, 等到下一帧界面刷新时,统一更新
    19.                 // 如何保证data数据修改后,dom显示数据和data保持一致?
    20.                 // vue中提供了一个异步函数, 用于检测dom异步更新队列, 当dom异步更新结束,会调用这个函数的回调, 此时我们在回调中读取dom数据,即最新数据
    21.                 this.$nextTick(()=>{
    22.                     console.log(3, this.name, this.$refs.h1.innerText) // 3 王五 王五
    23.                 })
    25.                 this.name = "王五";
    26.                 console.log(4, this.name, this.$refs.h1.innerText)//4 王五 张三
    28.             },
    29.         })
    30.     </script>
    31. </body>