[vue]$nextTick

如果在修改数据之后，需要立即获取被修改的元素，需要用到nextTick才可以获取到更新后的dom。

<template>
  <div id="app">
    <span ref="name">{{ name }}</span>
    <button type="button" @click="change">改变</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      list: [1,2,3],
      name: 'tom'
    }
  },
  methods: {
    change() {
      this.name = 'lucy';
      console.log(this.$refs.name.innerHTML, 'dom未更新'); // 输出tom
      this.$nextTick(function (){
        console.log(this.$refs.name.innerHTML, 'dom已更新'); // 输出tom
      });
    }
  }
}
</script>

原因就在于，vue更新dom时，并不是同步更新的，而是异步更新。
js遇到异步时，会将其放入事件队列继续执行主线程的任务，当主线程执行完毕时，才会去事件队列执行异步任务。所以呢，我们直接输出的话，获取到的就是未更新数据。

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

vue还提供了Promise的写法，既：this.$nextTick().then()。

[vue]$nextTick

推荐阅读更多精彩内容