脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue.nextTick()与setTimeout的区别

vue.nextTick()与setTimeout的区别及说明

 更新时间：2024年03月07日 08:43:11   作者：wei_dan1129  
这篇文章主要介绍了vue.nextTick()与setTimeout的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

nextTick相当于一个异步函数：

  • 在下次 DOM 更新循环结束之后执行延迟回调。
  • 在修改数据之后立即使用这个方法，获取更新后的 DOM。

vue.nextTick()的使用场景

Vue中DOM渲染是在mounted()钩子函数中，created()钩子函数中DOM还未渲染，无法直接操作DOM 

1、在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

<div id="app">
      <ul>
        <li v-for="(item,index) in arr" :key="index">{{item}}</li>
      </ul>
    </div>
<script>
let app = new Vue({
	data: {
	    arr: [1,2,3],
	  },
	  created() {
	  console.log('created',document.querySelectorAll('li').length)
	    this.$nextTick(()=>{
	    console.log('nextTick',document.querySelectorAll('li').length)
	    document.querySelectorAll('li')[0].innerHTML="created中更改了按钮内容"; 
	      })
	        
	  }
  });
  </script>

2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；

通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

<div id="app">
      <ul>
        <li v-for="(item,index) in arr" :key="index" @click="getAdd">{{item}}</li>
      </ul>
    </div>
<script>
let app = new Vue({
	data: {
	    arr: [1,2,3],
	  },
	  methods: {
	        getAdd(){
	            this.arr = [4,5,6,7];
	            this.$nextTick(()=>{
	                document.querySelectorAll('li')[3].innerHTML="33333333333333";
	                console.log('nextTick',document.querySelectorAll('li').length)
	            })
	
	        },
	    },
	    created() {
	      console.log('created',document.querySelectorAll('li').length)
	
	    }
    });
    </script>

li点击后 页面展示 由上图更改为

如果不放在nextTick中

<div id="app">
      <ul>
        <li v-for="(item,index) in arr" :key="index" @click="getAdd">{{item}}</li>
      </ul>
    </div>
<script>
let app = new Vue({
	data: {
	    arr: [1,2,3],
	  },
	  methods: {
	        getAdd(){
	            this.arr = [4,5,6,7];
	            document.querySelectorAll('li')[3].innerHTML="44444444444444";
	            console.log('methods',document.querySelectorAll('li').length)
	        },
	    },
	    created() {
	      console.log('created',document.querySelectorAll('li').length)
	
	    }
    });
    </script>

li点击后报错 因为DOM还未渲染

setTimeout

<div id="app">
      <ul>
        <li v-for="(item,index) in arr" :key="index" @click="getAdd">{{item}}</li>
      </ul>
    </div>
<script>
let app = new Vue({
	data: {
	    arr: [1,2,3],
	  },
	  methods: {
	        getAdd(){
	            this.arr = [4,5,6,7];
	            setTimeout(() => {
                document.querySelectorAll('li')[3].innerHTML="44444444444444";
                console.log('methods', document.querySelectorAll('li').length);
            });
	
	        },
	    },
	    created() {
	      console.log('created',document.querySelectorAll('li').length)
	
	    }
    });
    </script>

li点击后页面展示为

nextTick与setTimeout都是异步函数 不同的是nextTick比setTimeout优先执行

原因：

  • macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
  • micro-task(微任务)：Promise，process.nextTick
  • process.nextTick：process.nextTick(callback)类似node.js版的"setTimeout"，在事件循环的下一次循环中调用 callback 回调函数。
  • javascript是单线程
  • setTimeout：因为要入微任务队列，即使是0最快也要4ms，要等待出队。

宏任务的执行时间大于微任务的执行时间

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解vue移动端日期选择组件

    详解vue移动端日期选择组件

    小编给大家整理了关于vue移动端日期选择组件的知识点总结，希望能够给读者带来帮助，一起学习参考下。
    2018-02-02
  • vue实现经典选项卡功能

    vue实现经典选项卡功能

    这篇文章主要为大家详细介绍了vue实现经典选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue3+pinia用户信息持久缓存token的问题解决

    vue3+pinia用户信息持久缓存token的问题解决

    本文主要介绍了vue3+pinia用户信息持久缓存token的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue Render函数创建DOM节点代码实例

    Vue Render函数创建DOM节点代码实例

    这篇文章主要介绍了Vue Render函数创建DOM节点代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue.js中window.onresize的超详细使用方法

    vue.js中window.onresize的超详细使用方法

    这篇文章主要给大家介绍了关于vue.js中window.onresize的超详细使用方法,window.onresize 是直接给window的onresize属性绑定事件,只能有一个,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • 如何换个角度使用VUE过滤器详解

    如何换个角度使用VUE过滤器详解

    这篇文章主要给大家介绍了如何换个角度使用VUE过滤器的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用VUE具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-09-09
  • 一文详解Vue中nextTick的原理与作用

    一文详解Vue中nextTick的原理与作用

    Vue的nextTick方法是用于在DOM更新后执行回调的工具函数,它的作用是在当前JavaScript执行环境中延迟执行回调,以确保在下次DOM更新循环之前,可以访问到更新后的DOM,本文就给大家介绍一下Vue nextTick原理与作用,需要的朋友可以参考下
    2023-08-08
  • Ant Design Vue pro 动态路由的实现和打包方式

    Ant Design Vue pro 动态路由的实现和打包方式

    这篇文章主要介绍了Ant Design Vue pro 动态路由的实现和打包方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • JS数组Array常用方法汇总+实例

    JS数组Array常用方法汇总+实例

    这篇文章主要介绍了JS数组Array常用方法汇总和实例,JavaScript创建数组的方式,找数组元素,数组去重,实现数组排序需要的朋友可以参考下
    2022-05-05
  • Vue3中的script setup语法糖的使用及说明

    Vue3中的script setup语法糖的使用及说明

    在这篇博客中,我们将探讨 script setup 的含义、好处以及示例代码,帮助你更好地理解并在项目中合理运用这一特性,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03

最新评论