首页 >  vue代码 >  nextTick介绍与使用原理

nextTick介绍与使用原理

时间:2024-01-04

定义:nextTick是一个回调函数,值得是在下次 DOM 更新循环结束之后执行延迟回调。

在修改数据之后立即使用这个方法,获取更新后的 DOM。Vue在更新DOM时时异步执行的。当数据发生变化时,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新。

简单来说,nextTick是一个异步视图更新优化策略。

一、示例

for(let i =0;i<100000;i++){

num=i;

}

如果没有nextTick异步更新机制,那么每次num变化就会更新视图,那么则会更新10万次。

二、使用

某些场景下,比如我们使用更新了dom;或者在created中进行dom操作(此时dom还未渲染),需要使用到nextTick()回调函数

let testd = document.getElementById("test");

testd.style.width="200px";

this.$nextTick(() => {
    // 获取数据的操作...
})