Vue2异步更新及nextTick原理是什么
这篇文章主要介绍“Vue2异步更新及nextTick原理是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue2异步更新及nextTick原理是什么”文章能帮助大家解决问题。
JavaScript 执行机制
浏览器是多线程的,例如GUI渲染线程、JS引擎线程、事件监听线程等。
javascript 执行机制就是借用浏览器的多线程机制,再基于 Event Loop 事件循环机制实现的。其实现了单线程异步效果
Event Loop 步骤大致如下:
浏览器加载页面时,除了开辟堆栈内存外,还会创建两个队列 Web API:任务监听队列,监测异步任务是否可以执行 Task Queue:任务队列,分为异步宏任务队列和异步微任务队列 当主线程自上而下执行代码过程中,如果遇到异步代码,则把异步任务放到 Web API 中去监听 浏览器会开辟新的线程去监听是否可以执行 不会阻碍主线程的渲染,它会继续向下执行同步代码 当异步任务被监测为可以执行了(有了运行结果),也不会立即去执行,而是在 task queue 中放置一个事件,排队等待执行 根据微任务还是宏任务,放在不同的队列中 谁先进来排队的,谁在各自队伍的最前面 执行栈中的所有同步任务执行完毕,主线程空闲下来,此时会去 task queue 中把正在排队的事件,按照顺序取出来,进入主线程执行 微任务优先级比较高。当执行栈为空时,先去执行微任务队列中的事件,直到微任务队列为空,才会去执行宏任务队列中的事件 上述过程会不断重复,也就是常说的事件循环(Event Loop)
task 又分为宏任务(macro task)和微任务(micro task)两大类,在浏览器环境中
常见的 macro task 有 script(整体代码)、setTimeout/setInterval/setImmediate
、XMLHttpRequest/fetch
,DOM事件(如鼠标点击、滚动页面、放大缩小等),渲染事件(解析 DOM、计算布局、绘制) 常见的 micro task 有 Promise.then/catch/finally
、async/await
、MutationObserver
需要注意的是!!!如果处理微任务的过程中有新的微任务添加进来了,添加的速度一直比执行快,则永远执行微任务
下面的代码永远不会打印宏任务输出
function macroFn(){ setTimeout(() => { console.log('>>>>MA') },0)}function microFn(){ Promise.resolve().then(() => { console.log('mi') microFn() })}macroFn()microFn()
nextTick实现原理
vue2.7 源码中,有一个单独的文件class="lazy" data-src/core/util/next-tick.js
去维护 nextTick,有兴趣的同学可以自行去观看
vue2.7 源码中,nextTick并没有直接使用某个 API ,而是采用了优雅降级的方案去实现异步更新
在内部会尝试使用原生的Promise.then (IE不支持)
、MutationObserver
和 setImmediate (高版本IE专享)
,如果执行环境还不支持的话,则会采用 setTimeout(fn, 0)
需要注意的是,我们维护了一个 callbacks,用于存储 nextTick 回调
这样就保证了在同一个 tick 内多次调用 nextTick,只需创建一个异步任务,就可以依次执行 callbacks 中的所有 nextTick 回调。而不是去开启多个异步任务去处理。
let callbacks = [] // 存储 nextTick 回调let waiting = false // 防抖// 按照顺序依次执行 callbacks 中的方法function flushCallbacks() { let cbs = callbacks.slice(0) waiting = false callbacks = [] cbs.forEach(cb => cb()) }let timerFunc;if (Promise) { timerFunc = () => { Promise.resolve().then(flushCallbacks) }}else if(MutationObserver){ let observer = new MutationObserver(flushCallbacks); // 这里传入的回调是异步执行的 let textNode = document.createTextNode(1); observer.observe(textNode,{ characterData:true }); timerFunc = () => { textNode.textContent = 2; }}else if(setImmediate){ timerFunc = () => { setImmediate(flushCallbacks); }}else{ timerFunc = () => { setTimeout(flushCallbacks); }}export function nextTick(cb) { callbacks.push(cb) // 维护 nextTick 中的 cakllback 方法 if (!waiting) { timerFunc() waiting = true }}
异步更新
vue 内部的异步更新渲染也使用了 nextTick
在 Watcher 类的 update 更新方法中,我们调用了 queueWatcher 异步队列更新方法,该方法在 vue2.7源码中的 class="lazy" data-src/core/util/scheduler.js
文件中维护
import { queueWatcher } from './scheduler'class Watcher {... // 重新渲染 update() { console.log('watcher-update') queueWatcher(this) // watcher 异步更新 }}
class="lazy" data-src/core/util/scheduler.js
import { nextTick } from '../util/next-tick'let queue = []let has = {}let pending = false // 防抖function flushSchedulerQueue() { let flushQueue = queue.slice(0) queue = [] has = {} pending = false flushQueue.forEach(q => q.run()) // 在刷新的过程中可能还有新的 watcher,重新放到 queue 中}// 在一个tick周期内,不管我们的 update 执行多少次,只会执行一轮刷新操作export function queueWatcher(watcher) { const id = watcher.id if (!has[id]) { queue.push(watcher) has[id] = true if (!pending) { nextTick(flushSchedulerQueue) pending = true } }}
常见问题
nexTick 是异步还是同步?
这个不能一概而论,nextTick 内部既有同步代码又有异步代码。
例如 维护 callbacks 队列是同步任务;执行队列中的方法是异步任务
nextTick 回调的执行是微任务还是宏任务?
针对 vue2.7 来说,nextTick并没有直接使用某个 API ,而是采用了优雅降级的方案去实现异步更新。
在内部会尝试使用原生的Promise.then (微任务)
、MutationObserver (微任务)
和 setImmediate (宏任务)
,如果执行环境还不支持的话,则会采用 setTimeout (宏任务)
可以理解为 99% 的场景下都是微任务,只有在不支持 Promise 和 MutationObserver API的浏览器中,才会是宏任务,例如 IE9 、IE10
为什么要封装 nextTick?而不是使用某个具体的 API?
优雅降级。尽量使用微任务,尽可能缩短渲染周期
保证统一性。nextTick 可以暴露给用户,保证用户在修改数据之后立即使用这个方法,可以获取更新后的 DOM
this.name = 'libc'this.$nextTick(()=>{ console.log(document.querySelector('.user').innerHTML)});
关于“Vue2异步更新及nextTick原理是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341