Vue
.next
Tick
是
Vue
官方给我们提供的一个API(方法),作用是在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM;
那么我们的理解是:当数据发生变化之后,DOM视图并不会立即更新,如果我们在发生变化之后立马去获取某个节点或者某个节点的值,很有可能结果就是undefined;因为
Vue
实现响应式并不是数据发生变化之后DOM立即变化,而是按一定的策略进行DOM的更新;
来看一个小demo:
App.
vue
<template>
<div id=app>
<div ref=message>{{msg}}</div>
this.$next
Tick
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法
Vue
.next
Tick
一样,不同的是回调的this自动绑定到调用它的实例上,等同于updated生命周期函数
updated用法:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM...
Vue
3 中的 next
Tick
() 方法用于在 DOM 更新后执行回调函数。它可以在当前更新周期结束后执行回调函数,以确保在 DOM 更新后执行回调函数。使用方法如下:
Vue
.next
Tick
(() => {
// DOM 更新后执行的回调函数
在
Vue
3 中,next
Tick
() 方法已经被移动到了全局的
Vue
对象中,因此可以直接使用
Vue
.next
Tick
() 来调用。