源码:

		const callbacks = []
let pending = false function flushCallbacks () {
pending = false
const copies = callbacks.slice(0)
callbacks.length = 0
for (let i = 0; i < copies.length; i++) {
copies[i]()
}
}
let timerFunc
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
if (isIOS) setTimeout(noop)
}
isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) {
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
characterData: true
})
timerFunc = () => {
counter = (counter + 1) % 2
textNode.data = String(counter)
}
isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
timerFunc = () => {
setImmediate(flushCallbacks)
}
} else {
timerFunc = () => {
setTimeout(flushCallbacks, 0)
}
} export 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
timerFunc()
}
if (!cb && typeof Promise !== 'undefined') {
return new Promise(resolve => {
_resolve = resolve
})
}
}

  总体来说:就是先判断是否支持promise,如果支持promise。就通过Promise.resolve的方法,异步执行方法,如果不支持promise,就判断是否支持MutationObserver。如果支持,就通过MutationObserver(微异步)来异步执行方法,如果MutationObserver还不支持,就通过setTimeout来异步执行方法。

  MutaionObserver通过创建新的节点,调用timerFunc方法,改变MutationObserver监听的节点变化,从而触发异步方法执行。

vue.$nextTick实现原理的更多相关文章

  1. 全面解析Vue.nextTick实现原理

    vue中有一个较为特殊的API,nextTick.根据官方文档的解释,它可以在DOM更新完毕之后执行一个回调,用法如下: // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 V ...

  2. Vue.nextTick 的原理和用途

    转载自https://segmentfault.com/a/1190000012861862 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法 ...

  3. 总结了一下 Vue.nextTick() 的原理和用途

    对于 Vue.nextTick 方法,自己有些疑惑.在查询了各种资料后,总结了一下其原理和用途,如有错误,请不吝赐教. 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修 ...

  4. 【转载】Vue.nextTick 的原理和用途

    对于 Vue.nextTick 方法,自己有些疑惑.在查询了各种资料后,总结了一下其原理和用途,如有错误,请不吝赐教. 概览 官方文档说明: 用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修 ...

  5. 通俗易懂了解Vue中nextTick的内部实现原理

    1. 前言 nextTick 是 Vue 中的一个核心功能,在 Vue 内部实现中也经常用到 nextTick.在介绍 nextTick 实现原理之前,我们有必要先了解一下这个东西到底是什么,为什么要 ...

  6. Vue源码解析之nextTick

    Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能,在Vue内部实现中也经常用到nextTick.但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作 ...

  7. vue.js及项目实战[笔记]— 03 vue.js插件

    一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...

  8. js异步梳理:1.从浏览器的多进程到JS的单线程,理解JS运行机制

    大家很早就知道JS是一门单线程的语言.但是也时不时的会看到进程这个词.首先简单区分下线程和进程的概念 1. 简单理解进程 - 进程是一个工厂,工厂有它的独立资源 - 工厂之间相互独立 - 线程是工厂中 ...

  9. 2019前端面试系列——Vue面试题

    Vue 双向绑定原理        mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter.getter,在数 ...

随机推荐

  1. Intel® QAT 加速卡之数据面流程(图)

    QAT数据面流程 sessionSetupData数据结构 pOpData数据结构

  2. VUE002. 动态使用webpack打包处理后的静态图片路径({ img: require('xxx.png') })

    案例摘要 需求是通过v-for循环渲染数组中数据,其中包括本地包的图片文件.话不多说直接上代码: <a-radio-group class="template-radio"& ...

  3. python库--pymysql

    方法/类 返回值 参数 说明         .connect() ct 建立与mysql数据库的连接 host 数据库服务器所在的主机 user 用户名 password 密码 database 要 ...

  4. MySQL索引、事务、存储引擎

    一.MySQL 索引 1.索引的概念 ●索引是一个排序的列表,在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址(类似于C语言的链表通过指针指向数据记录的内存地址).●使用索引后可以不用扫描 ...

  5. 【第七篇】- Git 分支管理之Spring Cloud直播商城 b2b2c电子商务技术总结

    ​ Git 分支管理 几乎每一种版本控制系统都以某种形式支持分支.使用分支意味着你可以从开发主线上分离开来,然后在不影响主线的同时继续工作. 有人把 Git 的分支模型称为必杀技特性,而正是因为它,将 ...

  6. 6步快速配置Tomcat环境变量(Win10)

    一.配置 tomcat环境变量之前先安装jdk和配置jdk的环境变量 1.首先右击我的电脑(此电脑),点击属性,或者也可以从控制面板上打开,如下图,找到系统点击高级系统设置: 2.然后进入系统属性界面 ...

  7. WPF WPF中解决内存泄露的几点提示与解决方法

    http://www.cnblogs.com/LastPropose/archive/2011/08/01/2124359.html 一直以来用WPF做一个项目,但是开发中途发现内存开销太大,用ANT ...

  8. Python小技巧:这17个骚操作你都OK吗?

    导读:Python 是一门非常优美的语言,其简洁易用令人不得不感概人生苦短.本文中带我们回顾了 17 个非常有用的 Python 技巧,例如查找.分割和合并列表等.这 17 个技巧都非常简单,但它们都 ...

  9. CodeForce-702C Cellular Network(查找)

    Cellular Network CodeForces - 702C 给定 n (城市数量) 和 m (灯塔数量): 给定 a1~an 城市坐标: 给定 b1~bm 灯塔坐标: 求出灯塔照亮的最小半径 ...

  10. [CSP-J2020] 优秀的拆分

    [CSP-J2020] 优秀的拆分 难度:普及- 题目描述 一般来说,一个正整数可以拆分成若干个正整数的和. 例如,1=1,10=1+2+3+4 等.对于正整数 n 的一种特定拆分,我们称它为&quo ...