一、总述

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，回调函数获取更新后的dom再渲染出来；$nextTick 类似于一个非常高级的定时器，自动追踪DOM更新，更新好了就触发

语法： this.$nextTick( 回调函数 ) ，例如：

// 修改按钮操作
updateCateBtnFn(obj) {
  this.isEdit = true
  this.editId = obj.id
  this.dialogVisible = true
  // $nextTick()回调推迟到下一个 DOM 更新周期之后执行
  this.$nextTick(() => {
    this.addForm.cate_name = obj.cate_name
    this.addForm.cate_alias = obj.cate_alias
  })
}

二、JS的执行机制

JS是单线程语言，即指某一时间内只能干一件事，为什么 JS 不能是多线程呢？多线程就能同一时间内干多件事情了

是否多线程这个取决于语言的用途，一个很简单的例子，如果同一时间，一个添加了DOM，一个删除了DOM，这个时候语言就不知道是该添还是该删了，所以从应用JS只能是单线程

单线程就意味着我们所有的任务都需要排队，后面的任务必须等待前面的任务完成才能执行，如果前面的任务耗时很长，一些从用户角度上不需要等待的任务就会一直等待，这个从体验角度上来讲是不可接受的，所以JS中就出现了异步的概念。

了解了JS的执行机制后，再了解vue中的$nextTick

三、案例

<template>
  <div>
    <button @click="testClick()" ref="a">{{msg}}</button>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg:"原始值",
    }
  },
  methods:{
    testClick(){
      this.msg="修改值";
      console.log(this.$refs.a.innerText);   //this.$refs.a获取指定DOM，输出：原始值
    }
  }
}
</script>

以上的案例输出的是 “原始值”，并未按照顺序输出 “修改值”，当我们使用this.$nextTick方法后

methods:{
    testClick(){
      this.msg="修改值";
      this.$nextTick(() => {
        console.log(this.$refs.a.innerText);  //输出：修改值
      });
    }
  }

注意：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。this.$nextTick的用法_vuenextTick，则可以在回调中获取更新后的 DOM

四、什么时候需要this.nextTick()

data改变，更新DOM是异步的；DOM更新是异步的 ，Vue 响应式的特征，修改数据后，页面会自动更新，而更新DOM这个操作是异步的 ；这个时候使用 this.$nextTick( 回调函数 ) ，回调函数会在下一次 DOM更新完毕后执行

五、总结

vue在修改数据后 视图(DOM)不会立刻更新，而是等同一事件循环中的所有数据变化完成之后 再统一进行视图更新 所以 在修改数据更新立马读取DOM是获取不到新数据的 ， 获取到的原来的DOM函数

使用newxtTick 可以获得DOM更新后的数据 在下次DOM更新之后vue会回调nextTick指定的函数 可以在修改数据之后立即使用这个nextTick方法 在指定的函数里获取更新后的DOM

学习更多vue知识请关注CRMEB