nextTick介绍

1、背景

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

2、作用

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

3、例子

    //html<div class="app"><div ref="msgDiv">{{msg}}</div><div v-if="msg1">Message got outside $nextTick: {{msg1}}</div><div v-if="msg2">Message got inside $nextTick: {{msg2}}</div><div v-if="msg3">Message got outside $nextTick: {{msg3}}</div><button @click="changeMsg">Change the Message</button></div>//vue-jsexport default {name: "test",data() {return {msg: "Hello Vue.",msg1: "",msg2: "",msg3: ""};},methods: {changeMsg() {this.msg = "Hello world.";this.msg1 = this.$refs.msgDiv.innerHTML;console.log("msg1="+this.msg1)this.$nextTick(() => {this.msg2 = this.$refs.msgDiv.innerHTML;console.log("msg2="+this.msg2)});this.msg3 = this.$refs.msgDiv.innerHTML;console.log("msg3="+this.msg3)}}};//打印结果msg1=Hello Vue.  //数据进行变化之后没有立即执行DOM操作msg3=Hello Vue.  //因为msg2在延迟函数里，所以先打印msg3msg2=Hello world.  //changeMsg()执行完毕之后调用$nextTick函数，此时DOM已经更新

4、应用场景：

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

5、原因：

在created()的钩子函数执行的时候DOM其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进vue.nextTick()的回调函数中。
与之对应的是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已经完成，此时在该钩子函数中进行任何DOM操作都不会有问题。

感谢博主启发 https://www.jianshu.com/p/a7550c0e164f

nextTick介绍相关推荐

vue在微信里面的兼容问题_Vue在 iOS 微信浏览器下不能播放
问题的本质以上定位到问题大概花了我半小时时间,但是我并没有找到问题的根本原因,于是我翻阅了 Vue.js 2.5 的 release log,由于很长就不列了.Vue.js 每次升级主要分成 2 大 ...
vue在初始化时给scrollTop设置一个值，但scrollTop却始终为0
在vue项目中往往有这样一个需求,在初始化时需要给某个容器的scrollTop设置一个值,一开始的想法是在created或者mounted中改变 scrollTop 的值,但是却出现了几个问题. 问题 ...
Linux事件循环阻塞,深入浅析Node.js 事件循环、定时器和process.nextTick()
什么是事件循环尽管JavaScript是单线程的,但通过尽可能将操作放到系统内核执行,事件循环允许Node.js执行非阻塞I/O操作. 由于现代大多数内核都是多线程的,因此它们可以处理在后台执行的多 ...
CSS清除默认样式，技术详细介绍
前言 JavaScript是面向 Web 的编程语言,获得了所有网页浏览器的支持,是目前使用最广泛的脚本编程语言之一,也是网页设计和 Web 应用必须掌握的基本工具. JavaScript主要用途嵌 ...
“约见”面试官系列之常见面试题第三十九篇之异步更新队列-$nextTick（建议收藏）
目录一,前言二,什么是异步更新队列三,使用异步更新队列四,结尾一,前言这一篇介绍有关异步更新队列的知识,通过异步更新队列的学习和研究能够更好的理解Vue的更新机制二,什么是异步更新队列 ...
批量异步更新策略及 nextTick 原理
批量异步更新策略及 nextTick 原理为什么要异步更新通过前面几个章节我们介绍,相信大家已经明白了 Vue.js 是如何在我们修改 data 中的数据后修改视图了.简单回顾一下,这里面其实就是 ...
GitHub开源项目 - Jeecg-Boot开始开发平台介绍
GitHub开源项目 - Jeecg-Boot开始开发平台介绍 Jeecg-Boot 是一款基于SpringBoot+代码生成器的快速开发平台!采用前后端分离架构:SpringBoot,Mybatis ...
vue 多个回调_Vue 进阶面试必问，异步更新机制和 nextTick 原理
vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在下借这个机会从大家的文章和讨论中汲取了一 ...
nexttick使用场景_使用Jest实现Vue自动化测试
前言在开始前,我们先来聊一下什么是自动化测试.通常,在需求确定以后,测试会编写测试用例,然后,根据测试用例中描述的规程一步步执行测试,得到实际结果与期望结果的比较.在此过程中,为了节省人力.时间或硬 ...

nextTick介绍

nextTick介绍相关推荐

最新文章

热门文章