脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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，要等待出队。

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

总结

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

您可能感兴趣的文章:

相关文章

  • vscode使用Eslint+Prettier格式化代码的详细操作

    vscode使用Eslint+Prettier格式化代码的详细操作

    这篇文章主要介绍了vscode使用Eslint+Prettier格式化代码，本文通过图文示例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue better scroll 无法滚动的解决方法

    vue better scroll 无法滚动的解决方法

    better scroll可以实现轮播图和页面滚动，是移动端滚动插件，这篇文章主要介绍了vue better scroll 无法滚动的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-06-06
  • 加载 vue 远程代码的组件实例详解

    加载 vue 远程代码的组件实例详解

    vue-cli 作为 Vue 官方推荐的项目构建脚手架，它提供了开发过程中常用的，热重载，构建，调试，单元测试，代码检测等功能。我们本次的异步远端组件将基于 vue-cli 开发
    2017-11-11
  • vue2和el-input无法修改和写入并且不报错的解决方案

    vue2和el-input无法修改和写入并且不报错的解决方案

    这篇文章主要介绍了vue2和el-input无法修改和写入并且不报错的解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-07-07
  • 利用Vue实现数字翻滚动画效果展示

    利用Vue实现数字翻滚动画效果展示

    这篇文章主要介绍了利用Vue实现数字翻滚动画效果,通过Vue的响应式数据更新结合CSS3的动画效果,我们可以实现非常酷炫的数字翻滚效果,给数据可视化带来更多动感和吸引力,需要的朋友参考下吧
    2024-04-04
  • Vue3将虚拟节点渲染到网页初次渲染详解

    Vue3将虚拟节点渲染到网页初次渲染详解

    这篇文章主要为大家介绍了Vue3将虚拟节点渲染到网页初次渲染详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • Vue 删除和增加自定义组件实战教程

    Vue 删除和增加自定义组件实战教程

    Vue.js是一种流行的JavaScript框架,用于构建交互式的Web应用程序,在Vue.js中,我们可以通过动态地增加和删除组件来实现动态页面的构建和更新,本文介绍Vue 删除和增加自定义组件实战教程,感兴趣的朋友一起看看吧
    2024-08-08
  • Vue2+ElementUI表单、Form组件的封装过程

    Vue2+ElementUI表单、Form组件的封装过程

    在 Vue2 项目中,ElementUI 的 el-form 组件是常用的表单组件,它提供了丰富的功能和样式,可以满足各种需求,本文给大家介绍Vue2+ElementUI表单、Form组件的封装过程,感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • Vue常用指令V-model用法

    Vue常用指令V-model用法

    本篇文章主要介绍了Vue常用指令_V-model用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • vue2.0开发入门笔记之.vue文件的生成和使用

    vue2.0开发入门笔记之.vue文件的生成和使用

    本篇文章主要介绍了vue2.0开发入门笔记之.vue文件的生成和使用 ,非常具有实用价值，需要的朋友可以参考下
    2017-09-09

最新评论