vue中nextTick的用法

用法：

对于nextTick的用法官方是这么介绍的：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM，那么这句话是什么意思呢，其实简单来说就是，当我们修改数据后，视图层的数据更新是异步的，既：当修改过数据后立即输出绑定改数据的dom元素，该dom元素中的数据还是未更新过的。

说这么一大串不如来一段demo做演示：

<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>

当我们点击改变按钮时，将name重新赋值，按道理来说，下方的输出都应该为name，但实际控制台输出内容却并非如此，没有使用nextTick的输出为'tom'（未更新的数据），使用nextTick输出的内容为'luck'（更新后的数据），那么为什么会这样呢？原因就在于，vue更新dom时，并不是同步更新的，而是异步更新。我们都知道，js遇到异步时，会将其放入事件队列继续执行主线程的任务，当主线程执行完毕时，才会去事件队列执行异步任务。所以呢，我们直接输出的话，获取到的就是未更新数据。

当然，nextTick实际上也是一个异步的函数，如果将上述console置换一下位置，你会发现他们的输出顺序实际上还是一样的。如果你不喜欢这种回调的写法，vue还提供了Promise的写法，既：this.$nextTick().then()。

总结：

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