Vue 中 this.$nextTick(()=＞{ }) 的用法

1. this.$nextTick(()=>{ }) 将回调函数中的操作放到下一次DOM更新之后执行，类似全局方法vue.nextTick，只不过 this.$nextTick 只作用于调用它的实例

2. 代码示例

<template>
  <button ref="ctyBtn"
          @click="clickHandle">{{content}}</button>
</template>

<script>
export default {
  data () {
    return {
      content: '初始值'
    }
  },
  methods: {
    clickHandle () {
      this.content = '改变了的值'
      // 这时候直接打印的话，由于dom元素还没更新
      // 因此打印出来的还是未改变之前的值
      this.$nextTick(() => {
        // dom元素更新后执行，因此这里能正确打印更改之后的值
        console.log('1 ' + this.$refs.ctyBtn.innerText) // 改变了的值
      })
      console.log('2 ' + this.$refs.ctyBtn.innerText) // 初始值
    }
  }
}
</script>

3. 打印结果