Vue2异步更新及nextTick原理
vue 官网中是这样描述 nextTick 的
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,可以获取更新后的 DOM。
在学习 nextTick 是如何实现之前,我们要先了解下 JavaScript 的执行机制
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 源码中,有一个单独的文件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源码中的 src/core/util/scheduler.js
文件中维护
import { queueWatcher } from './scheduler'
class Watcher {
...
// 重新渲染
update() {
console.log('watcher-update')
queueWatcher(this) // watcher 异步更新
}
}
src/core/util/scheduler.js
import { nextTick } from '../util/next-tick'
/**
* @name QueueWatcher,内部 watcher 异步更新
* @decs 把当前的 watcher 暂存起来,在一个tick周期内,不管我们的 update 执行多少次,只会执行一轮刷新操作
*/
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
}
}
}
常见问题
1. nexTick 是异步还是同步?
这个不能一概而论,nextTick 内部既有同步代码又有异步代码。
例如 维护 callbacks 队列是同步任务;执行队列中的方法是异步任务
2. nextTick 回调的执行是微任务还是宏任务?
针对 vue2.7 来说,nextTick并没有直接使用某个 API ,而是采用了优雅降级的方案去实现异步更新。
在内部会尝试使用原生的Promise.then (微任务)
、MutationObserver (微任务)
和 setImmediate (宏任务)
,如果执行环境还不支持的话,则会采用 setTimeout (宏任务)
可以理解为 99% 的场景下都是微任务,只有在不支持 Promise 和 MutationObserver API的浏览器中,才会是宏任务,例如 IE9 、IE10
3. 为什么要封装 nextTick?而不是使用某个具体的 API?
优雅降级。尽量使用微任务,尽可能缩短渲染周期
保证统一性。nextTick 可以暴露给用户,保证用户在修改数据之后立即使用这个方法,可以获取更新后的 DOM
this.name = 'libc'
this.$nextTick(()=>{
console.log(document.querySelector('.user').innerHTML)
});
参考文档
Vue2异步更新及nextTick原理的更多相关文章
- Vue 源码解读(4)—— 异步更新
前言 上一篇的 Vue 源码解读(3)-- 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter.setter,从而拦截对数据的访问和设置. 当对 ...
- Android 异步更新UI-线程池-Future-Handler实例分析
前言: 我们在开发Android过程中,在处理耗时任务和UI交互的过程中,都会将耗时任务放到子线程处理并刷新. 下面我提出的两个问题,相信大多数开发者都会碰到: 1. 数据经常需要读取更新,并且比较耗 ...
- Vue你不得不知道的异步更新机制和nextTick原理
前言 异步更新是 Vue 核心实现之一,在整体流程中充当着 watcher 更新的调度者这一角色.大部分 watcher 更新都会经过它的处理,在适当时机让更新有序的执行.而 nextTick 作为异 ...
- Vue异步更新机制以及$nextTick原理
相信很多人会好奇Vue内部的更新机制,或者平时工作中遇到的一些奇怪的问题需要使用$nextTick来解决,今天我们就来聊一聊Vue中的异步更新机制以及$nextTick原理 Vue的异步更新 可能你还 ...
- 使用AsyncTask异步更新UI界面及原理分析
概述: AsyncTask是在Android SDK 1.5之后推出的一个方便编写后台线程与UI线程交互的辅助类.AsyncTask的内部实现是一个线程池,所有提交的异步任务都会在这个线程池中的工作线 ...
- 【转】从Vue.js源码看异步更新DOM策略及nextTick
在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: <template> <div> <div ref="test" ...
- Vue $nextTick 原理
使用场景 在进行获取数据后,需要对新视图进行下一步操作或者其他操作时,发现获取不到 DOM. 原因: 这里就涉及到 Vue 一个很重要的概念:异步更新队列(JS运行机制 . 事件循环). Vue 在观 ...
- Vue this.$nextTick原理
虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做.比如一个新闻滚动的列表项.如果在这里需要操作dom, 应该是等待 Vue 完成更新 DO ...
- Android异步处理系列文章四篇之二 使用AsyncTask异步更新UI界面
Android异步处理一:使用Thread+Handler实现非UI线程更新UI界面Android异步处理二:使用AsyncTask异步更新UI界面Android异步处理三:Handler+Loope ...
- Android异步处理二:使用AsyncTask异步更新UI界面
在<Android异步处理一:使用Thread+Handler实现非UI线程更新UI界面>中,我们使用Thread+Handler的方式实现了异步更新UI界面,这一篇中,我们介绍一种更为简 ...
随机推荐
- 关于uniapp的事件监听,使用uni.$once和uni.$on导致的重复监听
最近写项目的时候遇到个问题,就是在使用uniapp的事件监听器时出现重复监听问题.一开始我是用的uni.$on去监听事件,然后出现了重复的触发监听.百度了下,官方提示单次触发的建议使用uni.$onc ...
- 获取gps
package com.example.myapplication;import android.Manifest;import android.annotation.SuppressLint;imp ...
- 2003031126-石升福-python数据分析第三周作业
项目 Numpy 博客名称 2003031126-石升福-python数据分析第三周作业 课程班级博客链接 https://edu.cnblogs.com/campus/pexy/20sj 作业链接 ...
- MongoDB:内嵌文档查询匹配 查询集合中的文档
1.db.getCollection('Notification').find({ Title:{$regex:/班/}, "Message.TargetUrl":{$regex: ...
- 制作mnist格式数据集
import os from PIL import Image from array import * from random import shuffle # # 文件组织架构: # ├──trai ...
- 初始化时使window 全屏 且显示任务栏 wpf
void IniWindowFullScreemAndDisplayTaskbar() { this.Width = SystemParameters.FullPrimaryScreenWidth; ...
- python之自动化连连看脚本-第二关下移-小记
(如想转载,请联系博主或贴上本博地址) 参考前一篇基础上,做出第二关下移逻辑判断,写的比较啰嗦. 下移和第一关不动基础代码是一样的.需要注意同列下移和不同列下移2种情况,同列下移需要注意相邻的2个和不 ...
- git Permission denied, please try again.
博主在github上下载tiny face的的源代码的时候,遇到git clone命令为:git clone --recursive git@github.com:peiyunh/tiny.git 而 ...
- Less-4 报错注入
补坑:报错注入 当我们 union 无法注入的时候,可以使用报错注入,这里我们有三种报错注入,xpth语法错误和count()+rand()+floor()+group by重复组建错误 extrac ...
- 脏牛-Linux内核提权
漏洞范围 下载地址:https://github.com/FireFart/dirtycow 有一点可以在意,dirty.c内置在了kali中,使用命令searchsploit dirty可以搜索 也 ...