Vue的这个input 聚焦为什么要依赖nextTick函数？

Question

 <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="Password"
          name="password"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon
            :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
          />
        </span>
      </el-form-item>

点击监听

   showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      //this.$refs.password.focus();
      // 问题： 为什么这里要使用 nextTick
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },

实现的效果： 点击小眼睛后 鼠标自动聚焦到 input输入框

问题： 为什么要用nextTick？ 测试发现不用nextTick 无法聚焦。

补充内容------------

Answer 1

得看你的 showPwd 是什么时候触发的，如果在触发的时候 input 还没有被渲染就会需要使用 $nextTick 来保证 input 元素被渲染。

Answer 2

简单来说，Vue 的流程是：

1. 改变属性（data）
2. 缓存所有属性变更
3. 生成新的 virtual dom，对比看是否需要更新 dom
4. 如果需要，则更新 dom

所以很显然，绝大部分手动操作 dom 的操作都应该在属性变更后，$nextTick() 之后再进行。有些时候甚至要等更久。

Answer 3

你的el-input有个:key="passwordType"，这样passwordType每次修改，整个el-input会重新渲染，dom也会重新生成

因为.focus是原生dom的方法，如果dom还没加载完成，肯定就不会聚焦成功了，nextTick会在dom更新成功后调用