$nextTick的使用

用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

<template>
  <div>
    <p ref="msgp">{{msg}}</p>
    <button @click="change">使用$nextTick获取</button>
  </div>
</template>

<script>
export default {
  name: 'nextTick',
  data() {
    return {
      msg: '未更新'
    }
  },
  methods: {
    change() {
      // 修改数据
      this.msg = '被更新了'
      // DOM还没有更新
      console.log(this.$refs.msgp.innerHTML)
      this.$nextTick(() => {
        // DOM更新了
        console.log('$nextTick:' + this.$refs.msgp.innerHTML)
      })
    }
  },
  created() {
  }
}
</script>