Vue $nextTick 解决 v-if 切换后操作 DOM 报错问题

场景

控制v-if的inputVisible变量来显示input输入框，但输入框显示后需要获取焦点。

<template>
  <div>
    <div>
      <input v-if="inputVisible" ref="inputRef" type="text" placeholder="请输入">
    </div>

    <button @click="showInput">展示按钮</button>
  </div>
</template>

$nextTick

如果直接在改变v-if可见性后对DOM进行操作会报错，因为此时DOM还没开始渲染，还没开始走updated生命周期。

使用this.$nextTick(callback function)接收DOM渲染完毕的回调，在回调函数中对元素进行操作。

export default {
  name: "NextTick",
  data: () => ({
    inputVisible: false
  }),
  methods: {
    showInput() {
      this.inputVisible = true
      // DOM渲染完毕才能执行，因为此时生命周期还没走到渲染 input 组件
      // this.$refs.inputRef.focus()
      // this.$nextTick 等到 DOM 渲染完毕才执行 callback 中的回调
      this.$nextTick(()=>{
        this.$refs.inputRef.focus()
      })
    }
  }
}