一文了解Vue中的nextTick


Posted in Javascript onMay 06, 2019

Vue中的 nextTick 涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下。其中关于 nextTick 的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下 nextTick 。

一、示例

先来一个示例了解下关于Vue中的DOM更新以及 nextTick 的作用。

模板

<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实例

new Vue({
 el: '.app',
 data: {
  msg: 'Hello Vue.',
  msg1: '',
  msg2: '',
  msg3: ''
 },
 methods: {
  changeMsg() {
   this.msg = "Hello world."
   this.msg1 = this.$refs.msgDiv.innerHTML
   this.$nextTick(() => {
    this.msg2 = this.$refs.msgDiv.innerHTML
   })
   this.msg3 = this.$refs.msgDiv.innerHTML
  }
 }
})

点击前

一文了解Vue中的nextTick

点击后

一文了解Vue中的nextTick

从图中可以得知:msg1和msg3显示的内容还是变换之前的,而msg2显示的内容是变换之后的。其根本原因是因为Vue中DOM更新是异步的(详细解释在后面)。

二、应用场景

下面了解下 nextTick 的主要应用的场景及原因。

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

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进 Vue.nextTick() 的回调函数中。

具体原因在Vue的官方文档中详细解释:

Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel ,如果执行环境不支持,会采用 setTimeout(fn, 0) 代替。

例如,当你设置 vm.someData = 'new value' ,该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程,但是如果你想在 DOM 状态更新后做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

三、 nextTick 源码浅析

作用

Vue.nextTick 用于延迟执行一段代码,它接受2个参数(回调函数和执行回调函数的上下文环境),如果没有提供回调函数,那么将返回 promise 对象。

源码

/**
 * Defer a task to execute it asynchronously.
 */
export const nextTick = (function () {
 const callbacks = []
 let pending = false
 let timerFunc

 function nextTickHandler () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
   copies[i]()
  }
 }

 // the nextTick behavior leverages the microtask queue, which can be accessed
 // via either native Promise.then or MutationObserver.
 // MutationObserver has wider support, however it is seriously bugged in
 // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
 // completely stops working after triggering a few times... so, if native
 // Promise is available, we will use it:
 /* istanbul ignore if */
 if (typeof Promise !== 'undefined' && isNative(Promise)) {
  var p = Promise.resolve()
  var logError = err => { console.error(err) }
  timerFunc = () => {
   p.then(nextTickHandler).catch(logError)
   // in problematic UIWebViews, Promise.then doesn't completely break, but
   // it can get stuck in a weird state where callbacks are pushed into the
   // microtask queue but the queue isn't being flushed, until the browser
   // needs to do some other work, e.g. handle a timer. Therefore we can
   // "force" the microtask queue to be flushed by adding an empty timer.
   if (isIOS) setTimeout(noop)
  }
 } else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
 )) {
  // use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  var counter = 1
  var observer = new MutationObserver(nextTickHandler)
  var textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
   characterData: true
  })
  timerFunc = () => {
   counter = (counter + 1) % 2
   textNode.data = String(counter)
  }
 } else {
  // fallback to setTimeout
  /* istanbul ignore next */
  timerFunc = () => {
   setTimeout(nextTickHandler, 0)
  }
 }

 return function queueNextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
   if (cb) {
    try {
     cb.call(ctx)
    } catch (e) {
     handleError(e, ctx, 'nextTick')
    }
   } else if (_resolve) {
    _resolve(ctx)
   }
  })
  if (!pending) {
   pending = true
   timerFunc()
  }
  if (!cb && typeof Promise !== 'undefined') {
   return new Promise((resolve, reject) => {
    _resolve = resolve
   })
  }
 }
})()

首先,先了解 nextTick 中定义的三个重要变量。

callbacks

用来存储所有需要执行的回调函数

pending

用来标志是否正在执行回调函数

timerFunc

用来触发执行回调函数

接下来,了解 nextTickHandler() 函数。

function nextTickHandler () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
   copies[i]()
  }
 }

这个函数用来执行 callbacks 里存储的所有回调函数。

接下来是将触发方式赋值给 timerFunc 。

  • 先判断是否原生支持promise,如果支持,则利用promise来触发执行回调函数;
  • 否则,如果支持MutationObserver,则实例化一个观察者对象,观察文本节点发生变化时,触发执行所有回调函数。
  • 如果都不支持,则利用setTimeout设置延时为0。

最后是 queueNextTick 函数。因为 nextTick 是一个即时函数,所以 queueNextTick 函数是返回的函数,接受用户传入的参数,用来往callbacks里存入回调函数。

一文了解Vue中的nextTick

上图是整个执行流程,关键在于 timeFunc() ,该函数起到延迟执行的作用。

从上面的介绍,可以得知 timeFunc() 一共有三种实现方式。

  1. Promise
  2. MutationObserver
  3. setTimeout

其中 Promise 和 setTimeout 很好理解,是一个异步任务,会在同步任务以及更新DOM的异步任务之后回调具体函数。

下面着重介绍一下 MutationObserver 。

MutationObserver 是HTML5中的新API,是个用来监视DOM变动的接口。他能监听一个DOM对象上发生的子节点删除、属性修改、文本内容修改等等。

调用过程很简单,但是有点不太寻常:你需要先给他绑回调:

var mo = new MutationObserver(callback)

通过给 MutationObserver 的构造函数传入一个回调,能得到一个 MutationObserver 实例,这个回调就会在 MutationObserver 实例监听到变动时触发。

这个时候你只是给 MutationObserver 实例绑定好了回调,他具体监听哪个DOM、监听节点删除还是监听属性修改,还没有设置。而调用他的 observer 方法就可以完成这一步:

var domTarget = 你想要监听的dom节点
mo.observe(domTarget, {
   characterData: true //说明监听文本内容的修改。
})

 一文了解Vue中的nextTick

在 nextTick 中 MutationObserver 的作用就如上图所示。在监听到DOM更新后,调用回调函数。

其实使用 MutationObserver 的原因就是 nextTick 想要一个异步API,用来在当前的同步代码执行完毕后,执行我想执行的异步回调,包括 Promise 和 setTimeout 都是基于这个原因。其中深入还涉及到 microtask 等内容,暂时不理解,就不深入介绍了。

总结

以上所述是小编给大家介绍的Vue中的nextTick,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
js选项卡的实现方法
Feb 09 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
angular 服务随记小结
May 06 #Javascript
详解如何使用nvm管理Node.js多版本
May 06 #Javascript
关于AOP在JS中的实现与应用详解
May 06 #Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 #Javascript
一文读懂ES7中的javascript修饰器
May 06 #Javascript
JavaScript中AOP的实现与应用
May 06 #Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 #Javascript
You might like
是否存在第一台收音机的说法
2021/03/01 无线电
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
js实现图片实时时钟
2020/01/15 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
python实现获取Ip归属地等信息
2016/08/27 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
高三自我评价
2014/02/01 职场文书
清明节演讲稿
2014/05/27 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
党员对照检查材料
2014/09/22 职场文书
《法国号》教学反思
2016/02/22 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android