VUE中关于this.$nextTrick()的记录

目录

 

问题描述

实现思路

我的理解

---

问题描述

项目中有这样一个需求，页面中有一个textArea输入框，当输入相关字符，例如：下划线_，#、{的时候，会自动有一个弹框，弹框中是输入框，让输入相关内容，按下回车键，相关内容会进行转换追加到textArea中。要求是默认进入页面textArea自动获取焦点，弹框的时候，弹框中的输入框自动获取焦点。

实现思路

使用elementUI的el-dailog作为弹框处理，通过监听extArea的输入内容，分析输入的最新字符是否满足弹框的要求进行弹框的显示，同时根据不同的字符，弹框显示的输入框内容也有不同，同时让在弹框中的第一个input输入框自动获取焦点。这里有一个关键问题点在于如何让正在输入状态下的textArea失去焦点，并让弹框中的输入框自动获取校验。因为el-dialog相关代码是和父组件写在一起的。尝试的解决思路包括：

（1）让弹框中的el-input也添加autofocus=true的属性

（2）在弹框对应的show=true的时候，通过获取input的ref，this.$refs.xxx.focus()来设置获取焦点

这两种方案经过尝试都是不行的，第一种没任何效果。第二种提示focus方法未定义。但其实el-input是有这个方法，按照第二种写法就会会有问题，为什么？

这里就涉及vue关于dom操作的异步刷新了。在el-dialog显示的时候，input输入框的渲染和显示是通过v-if显示的，在dom正常渲染前，先去调用focus，所以就报错了，最终通过如下代码解决：

if (this.dialogInfo.show) {
   this.$nextTick(() => {
       this.$refs.markInput.focus();
       this.$refs.markInput.$el.focus();
        this.$refs.markInput.$el.children[0].focus();
       });
}

我的理解

通过使用this.$nextTick()可以立马获取到已经更新出来的dom并对其进行操作，可以确保dom一定是存在的。

之所以要用这个方法的原因在于，我们在修改双向绑定的数据的时候，数据回显到dom有一个时间差，在这个时间差内，如果直接通过操作dom获取数据的话，取不到已经赋值的最新数据，但是在nextTick里通过操作dom获取的话，就会是最新的。