vue中this.$nextTick()使用解析

原理

vue中数据和dom渲染由于是异步的，所以要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。

this.$nextTick 作用是可以将回调延迟到下次DOM更新循环之后执行。

this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用它的实例上

created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$nextTick()就会被大量使用，而与created()对应的是mounted()的钩子函数则是在dom完全渲染后才开始渲染数据，所以在mounted()中操作dom基本不会存在渲染问题。

使用场景

例子1：

点击按钮显示原本以 v-show = false 隐藏起来的输入框，并获取焦点。

showsou(){
  this.showit = true //修改 v-show
  document.getElementById("keywords").focus()  //在第一个 tick 里，获取不到输入框，自然也获取不到焦点
}

修改为：

showsou(){
  this.showit = true
  this.$nextTick(function () {
    // DOM 更新了
    document.getElementById("keywords").focus()
  })
}

例子2：

点击获取元素宽度。

<div id="app">
    <p ref="myWidth" v-if="showMe">{{ message }}</p>
    <button @click="getMyWidth">获取p元素宽度</button>
</div>

<script>
getMyWidth() {
    this.showMe = true;
    //this.message = this.$refs.myWidth.offsetWidth;
    //报错 TypeError: this.$refs.myWidth is undefined
    this.$nextTick(()=>{
    //dom元素更新后执行，此时能拿到p元素的属性
    this.message = this.$refs.myWidth.offsetWidth;
  })
}
</script>

例子3：

在父组件中通过引用找到子组件调用子组件的方法

在父组件中，每次打开弹层时，找到子组件，要求它去发请求获取详情

添加引用:

// 子组件
<DeptDialog
        :id="curId"
        ref="deptDialog"
        :is-edit="isEdit"
        @success="hAddSuccess"
      />

在编辑时：找到子组件，要求它去发请求获取详情

// 用户点了编辑
    hEdit(id) {
      // 1. 保存当前操作的部门编号
      this.curId = id
      // 2.显示弹层
      this.showDialog = true
​
      // 3. 修改isEdit
      this.isEdit = true
​
+     // 获取子组件的引用
+     this.$nextTick(() => {
        // 调用子组件的方法
        this.$refs.deptDialog.methodes()
      })
    },