Vue.$nextTick()源码解析

Lionad-Morotar 发布于2019-08-21 17:08 / 1474人阅读

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

源码在src/core/util/next-tick.js下

用法

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

// 修改数据
vm.msg = "Hello"
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

原理

vue 在内部实现了一个任务队列, 在当前的事件循环结束后去执行任务队列里的回调函数(这个浏览器或者node的事件队里其实差不多).

在调用$nextTick函数的时候, 会将回调函数push到之前定义的callbacks中.然后在当前的事件循环结束后去调用它们.那么重点来了, Vue是如何判断事件循环结束了的呢?

function nextTick (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
    if (useMacroTask) {
      macroTimerFunc()
    } else {
      microTimerFunc()
    }
  }
  // $flow-disable-line
  if (!cb && typeof Promise !== "undefined") {
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

window.setImmediate()
该方法用来把一些需要长时间运行的操作放在一个回调函数里,在浏览器完成后面的其他语句后,就立刻执行这个回调函数.不过这个只能在ie中用

if (typeof setImmediate !== "undefined" && isNative(setImmediate)) {
  macroTimerFunc = () => {
    setImmediate(flushCallbacks)
  }
}

https://developer.mozilla.org...

channel message api

该方法主要用于不同的上下文之间的通信.

else if (typeof MessageChannel !== "undefined" && (
 isNative(MessageChannel) ||
 // PhantomJS
 MessageChannel.toString() === "[object MessageChannelConstructor]"
)) {
 const channel = new MessageChannel()
 const port = channel.port2
 channel.port1.onmessage = flushCallbacks
 macroTimerFunc = () => {
   port.postMessage(1)
 }
}

setTimeout

else {
 /* istanbul ignore next */
 macroTimerFunc = () => {
   setTimeout(flushCallbacks, 0)
 }
}

私有云海外云主机 vue源码 vue webrtc 源码 nextTick() nextTick

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89178.html

vue源码解析：nextTick

摘要：对属性值进行修改操作时，如，实际上会触发。下面看源码，为方便越读，源码有删减。总结为了保证性能，会把修改添加到异步任务，所有同步代码执行完成后再统一修改，一次事件循环中的多次数据修改只会触发一次。 1 nextTick的使用 vue中dom的更像并不是实时的，当数据改变后，vue会把渲染watcher添加到异步队列，异步执行，同步代码执行完成后再统一修改dom，我们看下面的代码。 ...

PrototypeZ 2019-08-26 10:44 评论0 收藏0
vue 源码解析 --虚拟Dom-render

摘要：用于延迟执行一段代码，它接受个参数回调函数和执行回调函数的上下文环境，如果没有提供回调函数，那么将返回对象。 instance/index.js function Vue (options) { if (process.env.NODE_ENV !== production && !(this instanceof Vue) ) { warn(Vue is a ...

Tony 2019-08-26 11:00 评论0 收藏0
【Vue源码探究一】当我们引入Vue，我们引入了什么？

摘要：源码版本构造器实例选项让我们用一段展示一下这三个概念其中的构造器实例实例名可以任意取，这里我们便于理解保持和文档一致选项即为传入构造器里的配置选项。其实构造器上也绑了不少好用的方法。源码版本：2.0.5 构造器、实例、选项让我们用一段demo展示一下这三个概念： //HTML {{ message }} //JS var vm = new Vue({ el: #app,...

mengbo 2019-08-20 16:30 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
【Vue源码】Vue中DOM的异步更新策略以及nextTick机制

摘要：本篇文章主要是对中的异步更新策略和机制的解析，需要读者有一定的使用经验并且熟悉掌握事件循环模型。这个结果足以说明中的更新并非同步。二是把回调函数放入一个队列，等待适当的时机执行。通过的主动来触发的事件，进而把回调函数作为参与事件循环。本篇文章主要是对Vue中的DOM异步更新策略和nextTick机制的解析，需要读者有一定的Vue使用经验并且熟悉掌握JavaScript事件循环模型。 ...

selfimpr 2019-08-26 11:46 评论0 收藏0