Vue $nextTick 原理
使用场景
在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到 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.then 和 MutationObserver,如果都不支持,就会采用 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 原理的更多相关文章
- Vue你不得不知道的异步更新机制和nextTick原理
前言 异步更新是 Vue 核心实现之一,在整体流程中充当着 watcher 更新的调度者这一角色.大部分 watcher 更新都会经过它的处理,在适当时机让更新有序的执行.而 nextTick 作为异 ...
- Vue异步更新机制以及$nextTick原理
相信很多人会好奇Vue内部的更新机制,或者平时工作中遇到的一些奇怪的问题需要使用$nextTick来解决,今天我们就来聊一聊Vue中的异步更新机制以及$nextTick原理 Vue的异步更新 可能你还 ...
- Vue this.$nextTick原理
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...
- Vuejs的$nextTick原理
本质: nextTick,本质上是一个异步API,表示当前同步流程执行完成后再调用传入的函数. 根据环境不同,异步API的实现可以分别通过: setTimeout(0), new Promise(), ...
- Vue源码学习(零):内部原理解析
本篇文章是在阅读<剖析 Vue.js 内部运行机制>小册子后总结所得,想要了解详细内容,请参考原文:https://juejin.im/book/5a36661851882538e2259 ...
- vue nexttick的理解和使用场景
应用场景 需要在视图更新之后,基于新的视图进行操作 文档说明 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM nextTick原理 1.异步说明 V ...
- Vue视图渲染原理解析,从构建VNode到生成真实节点树
前言 在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...
- vue拓展题
本文档基于vue-cli技术栈总结了 vue-cli工程 vue.js核心知识 vue-router路由 vuex状态管理器 axios等http请求 移动端适配 Tab切换等常用功能 vue与原生a ...
- 2018web前端面试题总结
web面试题 css面试 一.css盒模型 css中的盒子模型包括IE盒子模型和标准的W3C盒子模型.border-sizing: border-box, inherit, content-box ...
随机推荐
- mssql sqlserver 获取指定日期为本月第几个工作日
转自:http://www.maomao365.com/?p=6771 摘要: 下文讲述工作中,需要获取指定日期在当月的工作日 下文讲述常规的指定工作日所在月的天数分析,实现思路:1 生成一个国家法定 ...
- SQL Server -- 回忆笔记(一):初见数据库
SQL Server知识点回忆篇(一):初见数据库 1. 主键 primary key 唯一标识, 不会重复的值才会用来当做主键使用. 表可以没有主键,但建议每张表都有主键. 2. 数据冗余 ...
- c/c++ 重载运算符的思考
c/c++ 重载运算符的思考 #include <iostream> using namespace std; class Imaginary{ public: Imaginary():r ...
- 浅析data:image/png;base64的应用
...我也是加一个网安交流群发现了他们的入群密码是这个 数据:图像/ PNG; BASE64,iVBORw0KGgoAAAANSUhEUgAAANwAAAAoCAIAAAAaOwPZAAAAAXNSR ...
- Shell按行读取文件的3种方法
Shell按行读取文件的方法有很多,常见的三种方法如下: 要读取的文件: [root@mini05 -]# cat file.info 写法一: [root@mini05 -]# cat read1. ...
- 【算法】LeetCode算法题-Length Of Last Word
这是悦乐书的第155次更新,第157篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第14题(顺位题号是58).给定一个字符串,包含戴尔字母.小写字母和空格,返回最后一个单 ...
- June. 20 2018, Week 25th. Wednesday
Be brave. Take risks. Nothing can substitute experience. 要敢于冒险,你的经历是无可替代的. From Paulo Coelho. Each s ...
- Lua5.1 升级 Lua5.3 升级 小结
Lua的版本差异确实是比较让人头疼的事情,之前在移动端一直采用Android下使用LuaJit,Ios下使用Lua5.1.这次升级到Xlua(lua5.3版本)主要有两方面的原因:一是ulua后续维护 ...
- webpack模块定义和使用的模式
在使用webpack作为模块加载工具时,我在想module.exports的模块应该是一种什么模式,最直接地思考是单例.不太确定,所以写一个简单例子做测试. 测试代码 singleton.js: va ...
- 【PS技巧】常用概念和功能操作
常用概念 1.画布大小与图像大小 画布大小是图像背景的大小,即画纸.图像大小是当前编辑的图层的所有对象大小,即画纸上的画. 常用功能操作 1.打开和新建功能 打开图片:Ctrl+O或双击工作区 图片垂 ...