使用场景

  在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到 DOM。

原因:

  这里就涉及到 Vue 一个很重要的概念:异步更新队列(JS运行机制 、 事件循环)。

  Vue 在观察到数据变化时并不是直接更新 DOM,而是开启一个队列,并缓冲同一事件循环中发生的所有数据改变。

  在缓冲时会去除重复数据,从而避免不必要的计算和DOM操作。

  然后,在下一个事件循环 tick 中,Vue 刷新队列并执行实际(已去重的)工作。

  所以如果用 for 循环来动态改变数据100次,其实它只会应用最后一次改变,如果没有这种机制,DOM就要重绘100次,是一个很大的开销,损耗性能。

一个this.$nextTick的实现

  首先,定义变量:

var callbacks = [];   // 缓存函数的数组
var pending = false; // 是否正在执行
var timerFunc; // 保存着要执行的函数

  然后,创建  $nextTick 内实际调用的函数

function nextTickHandler () {
pending = false;
// 拷贝出函数数组副本
var copies = callbacks.slice(0);
// 把函数数组清空
callbacks.length = 0;
// 依次执行函数
for (var i = 0; i < copies.length; i++) {
copies[i]();
}
}

  其次, Vue 会根据当前浏览器环境优先使用原生的 Promise.thenMutationObserver,如果都不支持,就会采用 setTimeout 代替,目的是 延迟函数到 DOM 更新后再使用

  一、Promise.then 的延迟调用

if (typeof Promise !== 'undefined' && isNative(Promise)) {
var p = Promise.resolve();
var logError = function (err) { console.error(err); };
timerFunc = function () {
p.then(nextTickHandler).catch(logError);
if (isIOS) { setTimeout(noop); }
};
}

  如果浏览器支持Promise,那么就用Promise.then的方式来延迟函数调用,Promise.then方法可以将函数延迟到当前函数调用栈最末端,也就是函数调用栈最后调用该函数。从而做到延迟。

  二、MutationObserver

else if (typeof MutationObserver !== 'undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString() === '[object MutationObserverConstructor]'
)) { var counter = 1;
var observer = new MutationObserver(nextTickHandler);
var textNode = document.createTextNode(String(counter));
observer.observe(textNode, {
characterData: true
});
timerFunc = function () {
counter = (counter + 1) % 2;
textNode.data = String(counter);
};
}

  

  MutationObserver是h5新加的一个功能,其功能是监听dom节点的变动,在所有dom变动完成后,执行回调函数。

  具体有一下几点变动的监听:

    childList:子元素的变动

    attributes:属性的变动

    characterData:节点内容或节点文本的变动

    subtree:所有下属节点(包括子节点和子节点的子节点)的变动

  可以看出,以上代码是创建了一个文本节点,来改变文本节点的内容来触发的变动,因为我们在数据模型更新后,将会引起dom节点重新渲染,所以,我们加了这样一个变动监听,用一个文本节点的变动触发监听,等所有dom渲染完后,执行函数,达到我们延迟的效果。

  三、setTimeOut 延迟器

else {
timerFunc = function () {
setTimeout(nextTickHandler, 0);
};
}

  利用setTimeout的延迟原理,setTimeout(func, 0)会将func函数延迟到下一次函数调用栈的开始,也就是当前函数执行完毕后再执行该函数,因此完成了延迟功能。

  闭包函数

return function queueNextTick (cb, ctx) {
var _resolve;
callbacks.push(function () {
if (cb) { cb.call(ctx); }
if (_resolve) { _resolve(ctx); }
});
// 如果没有函数队列在执行才执行
if (!pending) {
pending = true;
timerFunc();
}
// promise化
if (!cb && typeof Promise !== 'undefined') {
console.log('进来了')
return new Promise(function (resolve) {
_resolve = resolve;
})
}
}

  

  这个return的函数就是我们实际使用的闭包函数,每一次添加函数,都会想callbacks这个函数数组入栈。然后监听当前是否正在执行,如果没有,执行函数。这个很好理解。下面一个if是promise化。

this.$nextTick(function () {

})
// promise化
this.$nextTick().then(function () { }.bind(this))

  以上代码中第二种写法我们不常见,直接调用$nextTick函数然后用promise格式去书写代码,不过这个then里面需要手动绑定this,vue内部没有给做处理。

  附上完整代码:

  

var nextTick=(function () {
//存储需要触发的回调函数
var callbacks=[];
//是否正在等待的标志(false:允许触发在下次事件循环触发callbacks中的回调,
// true: 已经触发过,需要等到下次事件循环)
var pending=false;
//设置在下次事件循环触发callbacks的触发函数
var timerFunc;
//处理callbacks的函数
function nextTickHandler() {
// 可以触发timeFunc
pending=false;
//复制callback
var copies=callbacks.slice(0);
//清除callback
callbacks.length=0;
for(var i=0;i<copies.length;i++){
//触发callback的回调函数
copies[i]();
}
}
//如果支持promise,使用promise实现
if(typeof Promise !=='undefined' && isNative(promise)){
var p=Promise.resolve();
var logError=function (err) {
console.error(err);
};
timerFunc=function () {
p.then(nextTickHandler).catch(logError);
//iOS的webview下,需要强制刷新队列,执行上面的回调函数
if(isIOS) {setTimeout(noop);}
};
// 如果Promise不支持,但支持MutationObserver
// H5新特性,异步,当dom变动是触发,注意是所有的dom都改变结束后触发
} else if (typeof MutationObserver !=='undefined' && (
isNative(MutationObserver) ||
MutationObserver.toString()==='[object MutationObserverConstructor]')){
var counter = 1;
var observer=new MutationObserver(nextTickHandler);
var textNode=document.createTextNode(String(counter));
observer.observe(textNode,{
characterData:true
});
timerFunc=function () {
counter=(counter+1)%2;
textNode.data=String(counter);
};
} else {
//上面两种都不支持,用setTimeout
timerFunc=function () {
setTimeout(nextTickHandler,0);
};
}
//nextTick接收的函数,参数1:回调函数 参数2:回调函数的执行上下文
return function queueNextTick(cb,ctx) {
//用于接收触发Promise.then中回调的函数
//向回调函数中pushcallback
var _resolve;
callbacks.push(function () {
//如果有回调函数,执行回调函数
if(cb) {cb.call(ctx);}
//触发Promise的then回调
if(_resolve) {_resolve(ctx);}
});
//是否执行刷新callback队列
if(!pending){
pending=true;
timerFunc();
}
//如果没有传递回调函数,并且当前浏览器支持promise,使用promise实现
if(!cb && typeof Promise !=='undefined'){
return new Promise(function (resolve) {
_resolve=resolve;
})
}
}
})
随笔整理自
  https://www.cnblogs.com/xujiazheng/p/6852124.html
https://www.jianshu.com/p/a7550c0e164f
感谢博主分享!

Vue $nextTick 原理的更多相关文章

  1. Vue你不得不知道的异步更新机制和nextTick原理

    前言 异步更新是 Vue 核心实现之一,在整体流程中充当着 watcher 更新的调度者这一角色.大部分 watcher 更新都会经过它的处理,在适当时机让更新有序的执行.而 nextTick 作为异 ...

  2. Vue异步更新机制以及$nextTick原理

    相信很多人会好奇Vue内部的更新机制,或者平时工作中遇到的一些奇怪的问题需要使用$nextTick来解决,今天我们就来聊一聊Vue中的异步更新机制以及$nextTick原理 Vue的异步更新 可能你还 ...

  3. Vue this.$nextTick原理

    虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...

  4. Vuejs的$nextTick原理

    本质: nextTick,本质上是一个异步API,表示当前同步流程执行完成后再调用传入的函数. 根据环境不同,异步API的实现可以分别通过: setTimeout(0), new Promise(), ...

  5. Vue源码学习(零):内部原理解析

    本篇文章是在阅读<剖析 Vue.js 内部运行机制>小册子后总结所得,想要了解详细内容,请参考原文:https://juejin.im/book/5a36661851882538e2259 ...

  6. vue nexttick的理解和使用场景

    应用场景 需要在视图更新之后,基于新的视图进行操作 文档说明 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM nextTick原理 1.异步说明 V ...

  7. Vue视图渲染原理解析,从构建VNode到生成真实节点树

    前言 在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...

  8. vue拓展题

    本文档基于vue-cli技术栈总结了 vue-cli工程 vue.js核心知识 vue-router路由 vuex状态管理器 axios等http请求 移动端适配 Tab切换等常用功能 vue与原生a ...

  9. 2018web前端面试题总结

      web面试题 css面试 一.css盒模型 css中的盒子模型包括IE盒子模型和标准的W3C盒子模型.border-sizing: border-box, inherit, content-box ...

随机推荐

  1. IOS UIWebView用法

    转自猫猫小屋 IOS webview控件使用简介(一) IOS webview控件使用简介(二)–加载本地html

  2. java生成UUID

    UUID介绍: UUID(Universally Unique Identifier)全局唯一标识符,是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.按照开放软件基金会(OSF) ...

  3. Django之--MVC的Model

    在上一篇:Django之--通过MVC架构的html模板展示Hello World! 讲述了基本的MVC模型,但是却并没有测试Model的作用,本文通过mysql数据库来测试. Django自带的mo ...

  4. c/c++ 智能指针 weak_ptr 使用

    智能指针 weak_ptr 使用 weak_ptr用途: 1,解决空悬指针问题 2,解决循环引用问题 weak_ptr特点:没有*操作和->操作 weak_ptr是不控制所指对象生存周期的智能指 ...

  5. monkey_recorder录制monkeyrunner脚本

    转载:monkey_recorder录制monkeyrunner脚本   1. 你必须有android sdk, sdk的tools文件家里有一个monkeyrunner.bat.2. 将如下内容拷贝 ...

  6. php的register_long_arrays可以关闭以提高性能

    如果你使用php5.0以上,在程序中没有使用$HTTP_*_VARS这种变量,那么就可以考虑将register_long_arrays设置为Off,来提高一点点性能.看下PHP手册中关于registe ...

  7. python 时间模块(time ,datetime,calendar)

    Python中提供了时间相关的内置模块,我们主要用的是:time模块.datetime模块和calendar模块 ⽇期格式化的标准: %y 两位数的年份表示(00-99) %Y 四位数的年份表示(00 ...

  8. P1279 字串距离 dp 洛谷

    题目描述 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为”abcbcd”,则字符串“abcb□cd”,“□a□bcbcd□”和“abcb□cd□”都是X ...

  9. SQLAlchemy 嵌套事务的解决方案

    sqlachemy 是python的orm框架,在使用一段时间后,我们通常会出现事务嵌套的情况,看到很多人写代码的时候,居然是session到处传递,这无疑是加大了代码之间的耦合度. 案例: def ...

  10. 使用VMWare虚拟mac系统,设置网络的正确姿势

    1. 启动mac虚拟机: 2. 虚拟机-虚拟机设置-网络适配器-选择NAT模式: 3. 打开mac的网络设置,选择使用DHCP模式,并设置DNS服务器为win的DNS: 4. 回到win,控制面板-网 ...