【Vue】异步更新 & $nextTick

一、引出问题

需求

编辑标题, 编辑框自动聚焦

1. 点击编辑，显示编辑框
2. 让编辑框，立刻获取焦点

即下图上面结构隐藏，下面结构显示，并且显示的时候让它自动聚焦。

代码如下

问题

“显示之后”，立刻获取焦点是不能成功的！

原因：Vue 是异步更新DOM (提升性能)

我们设想的是 this.isShowEdit = true 执行完后再去执行 focus()，但其实 this.isShowEdit = true 执行完的时候，当前DOM并不会立即更新，而是上面所有代码执行完，DOM才会更新，这是由于每更新一次就去执行更新，效率是非常低的，应该一起更新

---

二、解决方案

$nextTick：等 DOM更新后,才会触发执行此方法里的函数体

使用SetTimeout也可以，但是不精准

语法: this.$nextTick(函数体)

this.$nextTick(() => {
  this.$refs.inp.focus()
})

注意：$nextTick 内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例

---

三、代码实现

<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="inp" />
      <button>确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="editFn">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "大标题",
      isShowEdit: false,
      editValue: "",
    };
  },
  methods: {
    editFn() {
      // 显示输入框
      this.isShowEdit = true;
      // 获取焦点
      // this.$refs.inp.focus()
      this.$nextTick(() => {
        this.$refs.inp.focus();
      });
    },
  },
};
</script>