<template>
 <div>
   <div ref="message">{{message}}</div>
   <button @click="fn">点击</button>
 </div>
</template>

export default {
    data () {
        return {
            message: 123
        };
    },
    methods () {
        fn () {
            this.message = 456;
            console.log(this.$refs.message.innerHTML); //?
        }
    }
}

• 上面的答案是 123 ，原因此时还没有将数据的更改，重新更新到DOM中。
• Vue这样做的好处是，最终一次性更新DOM，避免重复操作DOM，耗费性能。

使用vue中的nextTick可以获取更新DOM后的操作

<template>
 <div>
   <div ref="message">{{message}}</div>
   <button @click="fn">点击</button>
 </div>
</template>

export default {
    data () {
        return {
            message: 123
        };
    },
    methods () {
        fn () {
            this.message = 456;
            this.$nextTick(function(){ //或者Vue.nextTick
              console.log(this.$refs.message.innerHTML); // 456
            });
        }
    }
}