解析VUE中nextTick是什么
1、nextTick是Vue提供的一个全局API，由于Vue的异步更新策略导致我们对数据的修改不会立刻体现，在DOM变化上，此时如果想要立即获取更新后的DOM状态，就需要使用这个方法。
2、Vue在更新DOM时是异步执行的。只要监听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的DOM操作完成后才调用。
3、所以当我们想在修改数据后立即看到DOM执行结果就需要用到nextTick方法。
4、比如，在干什么的时候就会使用nextTick，传一个回调函数进去，在里面执行DOM操作即可。
5、 简单了解nextTick实现，它会在callbacks里面加入我们传入的函数，然后用timerFunc异步方式调用它们，首选的异步方式会是Promise。这让我明白为什么可以在nextTick中看到DOM操作的结果。
有这样一道面试题：nextTick是什么？
我们做如下实验，在磁盘任意的位置(确保今后可以想起来)，新建nextTick文件夹(可以命名为其他的)。
通过命令vue create demo创建以demo命名的vue2项目。
为了方便调试项目，我们通过VS Code打开创建的vue2项目demo。
我们来看操作1：
created(),mounted()按先后顺序同步执行(同步执行可不是同时执行，而是按顺序执行。异步，是同时进行各自任务。)，可以看到先打印了11,而后在mounted()里打印了22。
接着打印了created()里面的333,mounted()的444。这两个怎么也按顺序打印输出了呢？
我们来看下列操作：
以上操作对数据的获取都没有问题，都获取到了更新后的值。
我们在btn()方法里面，更改str的值试试
至此，回答面试题的问题——nextTick是什么？
是用来获取更新后的dom内容。
到此这篇关于解析VUE中nextTick的文章就介绍到这了,更多相关vue中nexttick内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇解决vue v-for src 图片路径问题 404，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。下面通过本文给大家分享Vue.js组件通信的几种姿势，感兴趣的朋友一起看看吧2017-10-10
Vue中@click.stop和@click.prevent实例详解
当我们使用Vue.js开发前端应用时,经常会在模版中使用@click指令来响应用户的点击事件,这篇文章主要给大家介绍了关于Vue中@click.stop和@click.prevent的相关资料,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了VUE 全局变量的几种实现方式,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本文给大家分享了vue实现简易翻页效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-11-11
文章介绍了使用Vue和Element UI的el-upload组件实现图片的批量上传和压缩功能,前端需引入image-conversion库并设置相关属性,关闭自动上传,通过on-change事件校验文件名和大小,并增加一个提交到服务器的按钮2025-01-01
在许多的后台系统中少不了导出Excel表格的功能,下面这篇文章主要给大家介绍了关于Vue3.0导出数据为自定义样式Excel的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
关于Element-ui中table默认选中toggleRowSelection问题
这篇文章主要介绍了关于Element-ui中table默认选中toggleRowSelection问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了Vue实现简单购物车小案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
vue2.x版本中computed和watch的使用及关联和区别
这篇文章主要介绍了vue2.x版本中computed和watch的使用及关联和区别，文章围绕主题展开详细的内容介绍，需要的小伙伴可以参考一下2022-07-07
最新评论