this.$nextTick (callback)方法的分析与使用

this.$nextTick 方法简介

$this.nextTick（callback） 方法的作用，就是当页面上元素被重新渲染（即DOM更新）之后，才会执行回调函数中的代码

关于this.$nextTick 方法的大致是在需要在页面重新渲染后进行某些数据操作时使用。
nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

this.$nextTick 方法使用举例

<!-- 此案例是通过 v-if 判断 scope.row.inputVisible（布尔值）来控制显示input框还是button按钮 -->

   <template slot-scope="scope">
    <!-- 输入的文本框 -->
                <el-input
                  class="input-new-tag"
                  v-if="scope.row.inputVisible"
                  v-model="scope.row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)"
                >
                </el-input>
                <!-- 添加的按钮 -->
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(scope.row)"
                  >+ New Tag</el-button
                >
    </template>

默认显示button按钮，当点击按钮后组件中ui元素被重新渲染，button按钮被渲染为了input输入框

methods {
// 文本框失去焦点或按下enter键，都会触发
    async handleInputConfirm(row) {
      if (row.inputValue.trim().length === 0) {
        row.inputValue = ''
        row.inputVisible = false
        return
      }
      // 如果没有return则说明输入了内容，需要做后续处理
      row.attr_vals.push(row.inputValue.trim())
      row.inputValue = ''
      row.inputVisible = false
      //   需要发起请求，保存这次操作
      this.saveAttrVals(row)
    },
// 点击按钮，显示文本输入框
    showInput(row) {
      row.inputVisible = true
      //   让文本框自动获得焦点
      //   $nextTick 方法的作用，就是当页面上元素被重新渲染之后，才会执行回调函数中的代码
      this.$nextTick(_ => {
      // 通过直接操作DOM中input元素，自动获取焦点
        this.$refs.saveTagInput.$refs.input.focus()
      })
    }
    }

结果截图

此处为初始渲染的页面：

当点击**“+New Tag”按钮后inputVisible值被重置为true**，使得页面重新渲染（即DOM更新），“+New Tag”按钮被重新渲染为input输入框，此时触发$nextTick 方法中的回调函数，使得input输入框获取焦点：

当将showInput方法中的$nextTick 方法注释掉

 showInput(row) {
      row.inputVisible = true
      //   让文本框自动获得焦点
      //   $nextTick 方法的作用，就是当页面上元素被重新渲染之后，才会执行回调函数中的代码
      // this.$nextTick(_ => {
      // 通过直接操作DOM中input元素，自动获取焦点
       // this.$refs.saveTagInput.$refs.input.focus()
      // })
      this.$refs.saveTagInput.$refs.input.focus()
    }

当将showInput方法中的$nextTick 方法注释掉后，页面重新渲染了(即DOM元素更新)，但是input框并没有自动获取焦点，并且编译器报错：

错误原因是：当页面被重新渲染后，找不到当前DOM元素，此处与异步调用相关，这里不做深入的探讨。

大致原因是因为：
Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。

如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。

当你设置 vm.someData = ‘new value’，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。

如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用

总结

关于this.$nextTick 方法的大致是在需要在页面重新渲染后进行某些数据操作时使用。
nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

最后有关此项目的完整使用我放在了码云中 商城后台管理，感兴趣的可以去看看，如果喜欢别忘了star一下