前端 | Vue nextTick 获取更新后的 DOM

vue

从 Vue 实例生命周期理解 nextTick api 原理及用法

前两天在开发时遇到一个需求:打开对话框的时候自动聚焦其中的输入框。由于原生的 autofocus 属性不起作用,需要使用组件库提供的 focus 方法手动手动获取焦点。于是有如下代码:

<el-button @click="openDialog">点击打开 Dialog</el-button>

<el-dialog :visible.sync="dialogVisible">

<el-input v-model="input" ref="input"></el-input>

</el-dialog>

methods: {

openDialog() {

this.dialogVisible = true;

const input = this.$refs.input;

input.focus();

},

},

结果报错了,原因是没有获取到 input 组件;通过 log,也验证了 this.$refs.input 的值确实是 undefined。但是经过测试,如果对话框默认状态是打开的,就不会报错;明明组件就在那,为什么获取不到呢?

生命周期 update

经过分析,这种现象是由于 Vue 实例的更新机制造成的。从下方的生命周期图(局部)中可以看出,组件装载好之后,遇到数据变化时将重新渲染虚拟 DOM(可以理解为 HTML 中的组件节点)。在本例中,隐藏的 Dialog 组件(以及其中的 input 组件)本来并没有渲染在 DOM 中,是在观察到 dialogVisible 属性变为 true 后再进行更新渲染的。

而网页渲染通常是一个异步任务,因此在 visible 属性刚刚更改时(一个函数中是同步过程),DOM 渲染还没有进行,因此自然获取不到此时还不存在的 input 组件了。

关于异步、JS任务队列、宏任务与微任务等概念的更多介绍,可参考博文JS多线程:任务队列

为了更直观地展示这个过程,可以在更新前后的钩子函数中试图获取组件并进行打印:

beforeUpdate() {

console.log("beforeUpdate");

const input = this.$refs.input;

console.log(input);

},

updated() {

console.log("updated");

const input = this.$refs.input;

console.log(input);

},

methods: {

openDialog() {

this.dialogVisible = true;

console.log("click open");

},

},

结果如下,可以验证之前的分析和猜想:

click open

beforeUpdate

undefined

updated

VueComponent {...}

Vue.nextTick

为了解决这个问题,Vue 提供了全局 api Vue.nextTick(),它的作用是提供下次 DOM 更新之后的回调。也就是说,在更新数据后调用 api,就能够获取到重新渲染后的 DOM 并进行相关操作。

nextTick 方法可以广泛适用于各种需要在数据更新后对相关 DOM 进行操作的情景,例如 v-ifwatch 等。

在上文的例子中再加入 nextTick:

openDialog() {

this.dialogVisible = true;

console.log("click open");

this.$nextTick(function () {

console.log("next tick");

const input = this.$refs.input;

console.log(input);

input.focus();

});

},

可以看到,回调确实是在 DOM 更新之后,也就是 updated 执行之后才执行的。获取组件与手动获得焦点的操作也能够正确执行了。

click open

beforeUpdate

undefined

updated

VueComponent {...}

next tick

VueComponent {...}

Promise

如果没有提供回调参数,并且浏览器支持 Promise,调用 nextTick 将返回一个 Promise。也就是说下面几种写法是等价的(环境支持的情况下):

Vue.nextTick(function () {...})

Vue.nextTick(() => {...})

Vue.nextTick().then(function () {...})

Vue.nextTick().then(() => {...})

关于 Promise 的介绍和用法,可以参考博文 JS Promise。

结语&参考资料

以上是个人对 Vue 中 nextTick api 的一些理解与思考,希望能给你提供帮助。如果有问题或疏漏之处,欢迎在评论中讨论与指正。

我将继续在个人博客中更新自己的学习笔记,以前端技术(Vue框架)为主,感兴趣的话欢迎关注!

参考资料:

Vue 文档 - api

Vue 文档 - 实例

以上是 前端 | Vue nextTick 获取更新后的 DOM 的全部内容, 来源链接: utcz.com/z/378425.html

回到顶部