Vue中的异步更新和 $nextTick

场景引入

需求：当用户点击编辑按钮后，显示一个弹窗，该弹窗有一个文本框，使得文本框自动聚焦
看似代码如下：

this.isShowEdit = true; // 显示输入框
this.$refs.inp.focus(); // 获取焦点

代码看似没有问题，显示文本框后，让文本框聚焦，但是在vue中却不能实现，这是由于vue是异步更新Dom的

this.$nextTick 是 Vue 提供的一个方法，用于在下次 DOM 更新循环结束之后执行回调函数。在 Vue 中，数据变化后，DOM 并不会立即更新，而是等待下一个事件循环（Event Loop）中执行。

使用 $nextTick 有以下几个常见的场景：

1.在数据变化后立即操作 DOM： 当你修改了数据，然后想要立即基于更新后的 DOM 进行一些操作时，可以使用 $nextTick：

methods: {
  updateData() {
    this.data = newData; // 修改数据
    this.$nextTick(() => {
      // DOM 已经更新，可以操作更新后的 DOM
      // ...
    });
  }
}

2.在 mounted 生命周期钩子中操作 DOM： 在 mounted 钩子中，组件已经挂载到 DOM 上，但此时 DOM 还未更新。如果你需要在 DOM 更新后执行操作，也可以使用 $nextTick：

mounted() {
  this.$nextTick(() => {
    // DOM 已经更新，可以操作更新后的 DOM
    // ...
  });
}

3.在 watch 监听器中操作 DOM： 当使用 watch 监听数据变化时，如果需要在 DOM 更新后执行操作，同样可以使用 $nextTick：

watch: {
  data: function(newValue, oldValue) {
    this.$nextTick(() => {
      // DOM 已经更新，可以操作更新后的 DOM
      // ...
    });
  }
}

使用 $nextTick 有助于确保你在操作 DOM 时，DOM 已经更新完成，避免了在同一事件循环中可能导致的问题。