浅析vue中的nextTick
更新时间：2020年12月28日 08:32:00 作者：Leise
这篇文章主要介绍了vue中nextTick的相关资料，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
背景
vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可以实现整合操作。
例子
methods: {
update() {
for (let i = 0; i < 10; i++) {
this.testNum = this.testNum + i;
}
},
},
在你的 Vue 视图中， testNum 会发生变化。不过需要注意的是这个变化的过程，虽然我们把 firstNum 循环修改了 10 次，但是实际上它只会把最后一次的值更新到视图上——这也是非常合理的，比如说我们这个 demo 里，每一次循环给 testNum 的赋值只不过是一个过程，最终的目的是拿到 10 次循环的计算结果而已。如果我们硬去算 10 次，那么不必要的性能开销必然是令人肉疼的。
需求
我们需要对data修改后并拿到DOM，对DOM进行操作解决，
例子
<template>
<div id="app">
<ul ref="ul1">
<li v-for="(v, i) in list" :key="i">{{ v }}</li>
</ul>
<button @click="add">add DOM</button>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
list: ["a", "b", "c"],
};
},
methods: {
add() {
this.list.push(`${Date.now()}`);
this.list.push(`${Date.now()}`);
this.list.push(`${Date.now()}`);
const ulElem = this.$refs.ul1;
console.log(ulElem.childNodes.length);
},
},
};
</script>
本来点击完之后数组长度应该输出6个，但是实际上数组长度只有3个，因为data改变后，DOM并不会立刻改变，此时我们是拿不到新增的节点的，这时候的DOM节点还是一开始的a,b,c 。DOM操作执行完之后，它再异步渲染。
不过我们的期望是点击完之后立刻拿到后面的三个，这时候就需要请出我们的主角nextTick。
add() {
this.list.push(`${Date.now()}`);
this.list.push(`${Date.now()}`);
this.list.push(`${Date.now()}`);
const ulElem = this.$refs.ul1;
this.$nextTick(() => {
console.log(ulElem.childNodes.length);
});
},
这个例子也可以看出，$nextTick会待DOM渲染完成再回调，同时也可以看出，我们虽然一次点击有三次修改data,但是多次修改会进行整合，最后渲染一次，这也说明渲染也是异步的，如果是同步，就没办法整合。
以上就是浅析vue中的nextTick的详细内容，更多关于vue中的nextTick的资料请关注脚本之家其它相关文章！
相关文章
今天小编就为大家分享一篇VUE DOM加载后执行自定义事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
无论是小型项目还是中大型项目，Vue-Router都是必选的一个组件，Vue-Router提供了便捷的方式进行路由跳转，在使用过程中有一些坑，希望能给在编码找不到问题时的码农提供一点灵感2022-06-06
本篇文章主要介绍了vue2.x 父组件监听子组件事件并传回信息的方法，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了vue arco.design锚点Anchor使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要介绍了vue3的沙箱机制的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
本文主要介绍了Vue 3.0中的setup函数,包括其概述、使用场景和具体用法,通过本文的介绍,我们可以看到,setup函数是用来将组件的状态和行为进行分离的一个重要工具,感兴趣的朋友跟随小编一起看看吧2024-11-11
Vue中使用 ElementUi 的 el-select 实现全选功能(思路详解
在开发中,有一个需求是 选项组件中使用到一个 全选的功能,特在这记录下实现的方法,方便后续的查阅,以及方便大家查阅借鉴,对vue ElementUi 全选功能感兴趣的朋友一起看看吧2024-02-02
这篇文章主要介绍了vue鼠标悬停事件，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue导入新工程 “node_modules依赖”问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
解读element-ui使用el-upload,before-upload函数不好使的问题
这篇文章主要介绍了解读element-ui使用el-upload,before-upload函数不好使的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
最新评论