nextTick能否获取到最新dom原理解析
更新时间：2022年11月17日 14:21:31 作者：远山无期
这篇文章主要为大家介绍了nextTick能否获取到最新dom原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
前言
众所周知，vue的dom更新操作时异步的，为了获取更新后的dom官方提供了相应的apinextTick,文档中对该api的描述为：将回调延迟到下次 DOM 更新循环之后执行 , 所谓的下一次，到底是哪一次呢？dom更新是异步任务，nextTick的回调也是异步任务，nextTick的回调中一定就能获取到最新的dom么?
nextTick的实现原理
vue2x中
出于兼容性考虑，依次判断浏览器是否支持，选择使用对应api
优先选择微任务，如果微任务都不支持，则选择宏任务
vue3中：
抛弃了兼容性，直接使用Promise,来实现nextTick
结论
由nextTick的源码可以看出，nextTick本质就是创建了一个微任务（不考虑setTimeout），将其回调推入微任务队列。vue中一个事件循环中的所有dom更新操作也是一个微任务，两者属于同一优先级，执行先后只于入队的先后有关，换句话说，如果你先写了nextTick，再写赋值语句（在此之前没有触发dom更新的操作），那在nextTick中获取的可就不是更新后的dom了
示例说明
- 例如下面的代码：
<template>
<div class="demo">
<p class="name">{{ name }}</p>
<button @click="modify">修改</button>
</div>
</template>
<script lang="ts" setup>
const name = ref("111");
const modify = () => {
name.value = "222"; // 关键的赋值语句，如果注释掉，结果就大不一样了
nextTick(() => {
const text = document.querySelector<HTMLElement>(".name").innerText;
console.log(text);
});
name.value = "333";
};
</script>
如上代码，如果注释掉name.value = "2222",虽然nextTick语句下面也有赋值操作：name.value = "3333";,但由于nextTick先进入微任务队列，所以回调先于dom更新执行，所以是获取的dom仍旧是旧的更新前的dom
- 图解
以上就是nextTick能否获取到最新dom原理解析的详细内容，更多关于nextTick获取最新dom的资料请关注脚本之家其它相关文章！
相关文章
TagsInput 是一种可编辑的输入框，通过回车或者分号来分割每个标签，用回退键删除上一个标签。这篇文章主要介绍了vue组件TagsInput的相关知识,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了vue-cli项目优化 缩短首屏加载时间,需要的朋友可以参考下2018-04-04
在Vue实例中,data属性是用户定义的用于存储数据的对象,而_data是Vue内部用于存储数据的对象,本文主要介绍了浅谈vue中的data与_data的关系是什么,感兴趣的可以了解一下2023-12-12
最近在项目中需要对数据进行可视化处理,而众所周知echarts是非常强大的插件,下面这篇文章主要给大家介绍了关于Vue使用echarts的完整步骤及解决各种报错的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了vue项目部署上线遇到的问题及解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-06-06
由于一些演示需要对一些简单页面进行配置,由于打包build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译,所以文件放在public,这篇文章主要给大家介绍了关于vue引用public文件夹中文件的多种方式,需要的朋友可以参考下2024-02-02
vue-router 是 Vue 的一个插件库，适用于构建单页面应用，这篇文章主要介绍了Vue router 路由安装以及使用,本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-10-10
这篇文章主要介绍了详解vuex commit保存数据技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了如何通过vue实现微博中常见的@人的功能，同时增加鼠标点击事件和一些页面小优化。感兴趣的小伙伴可以跟随小编一起学习一下2021-12-12
这篇文章主要介绍了关于Vue单元测试的几个坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
最新评论