Vue 进阶 [八] Vue 源码剖析 02 批量异步更新 & 虚拟DOM Diff 算法_flushschedulerqueue render触发多次-程序员宅基地
想多记录一点东西，好像有点不知道怎么怎么总结了，今天听了完了一节Vue 课程 ，主要关于Vue 异步更新策略 及 虚拟Dom 是 源码的剖析，因为没有太专注可能还得捋一捋，或者全部看完之后再回头看。
Vue 高效的秘诀是批量异步更新和虚拟DOM
Vue批量异步更新策略
概述
项目中有很多组件，每个组件代表了一个watcher 实例 ，在一个更新周期 指的是事件循环这次的更新周期之内，可能有好多数据都发生变化了，因此也可能会有很多各组件需要更新，那么此时比较好的方法就是把这些组件一起批量的进行更新，全部更新之后在浏览器一下子刷新页面。这样的效果和用户体验都是比较好的。
简要流程图如下：
VUE 中的具体实现
异步：只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变
更。
批量：如果同一个 watcher 被多次触发，只会被推入到队列中一次。去重对于避免不必要的计算
和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列执行实际工作。
异步策略：Vue 在内部对异步队列尝试使用原生的 Promise.then 、 MutationObserver 和
setImmediate ，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
Q：vue 源码应该从哪里开始看呢？
A：在 Observer index.js defineReactive 中 ，当数据发生变化 会调用dep.notify() 方法，进行通知更新，其实就是调用dep 肚子中所有的watcher 的update 方法。因此应该从watcher.js中的update 方法开始。
update() core\observer\watcher.js
dep.notify()之后watcher执行更新，执行入队操作
update () {
/* istanbul ignore else */
if (this.lazy) {
this.dirty = true
} else if (this.sync) {
this.run()
} else {
queueWatcher(this)
}
}queueWatcher(this):是把自己入队，在此方法中首先做的是去重，本身不存在才入队，因为 在一个组件里有好多key 可能同时发生变化，但是这个组件对应的watcher 都是一个，所以他只能进去一次。
export function queueWatcher(watcher: Watcher) {
const id = watcher.id
// 去重 不存在才入队
if (has[id] == null) {
has[id] = true
if (!flushing) {
queue.push(watcher)
} else {
// if already flushing, splice the watcher based on its id
// if already past its id, it will be run next immediately.
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// queue the flush
if (!waiting) {
waiting = true
if (process.env.NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue()
return
}
// 异步的刷新队列
nextTick(flushSchedulerQueue)
}
}
} timerFunc = () => {
// 启动一个微任务
p.then(flushCallbacks)
// In problematic UIWebViews, Promise.then doesn't completely break, but
// it can get stuck in a weird state where callbacks are pushed into the
// microtask queue but the queue isn't being flushed, until the browser
// needs to do some other work, e.g. handle a timer. Therefore we can
// "force" the microtask queue to be flushed by adding an empty timer.
if (isIOS) setTimeout(noop)
}有一些判断 其实在 timerFunc 函数汇总是启动了一个微任务 ，因此在一次宏任务完成之后，在清空微任务的时候就会调用 flushcallbacks ,尝试把队列中的watcher 全部刷新一遍。
小测验
以下是一个简单的例子明确看到vue的异步更新。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>异步更新</title>
<script src="../../dist/vue.min.js"></script>
</head>
<body>
<div id="demo">
<h1>异步更新</h1>
<p id="p1">{
{foo}}</p>
</div>
<script>
// 创建实例
const app = new Vue({
el: '#demo',
data: {
foo: 'ready'
},
mounted() {
setInterval(() => {
this.foo = Math.random()
this.foo = Math.random()
this.foo = Math.random()
// 异步行为 此时页面的内容是没有变的
// 以上数据的改变只是让watcher 入队而已，还没有进行dom 的更新，因此体现了 dom 的更新是异步的。那么批量性怎么体现的哪，因为foo 的值 有三次改变 而dom 中最终展示的是第三次的值。
// debugger
console.log('111', p1.innerHTML)
debugger
this.$nextTick(() => {
// 此处才是最新的值
console.log('nextTick', p1.innerHTML)
})
}, 3000);
}
})
</script>
</body>
</html>
虚拟DOM和Diff算法
概念
虚拟DOM（Virtual DOM ）是对DOM的JS抽象表示，它们是JS对象，能够描述DOM结构和关系，应用的各种状态变化会作用于虚拟DOM，组中映射到DOM上。
体验虚拟DOM
vue 中虚拟dom 的patch 用到了snabbdom ,因此自行引入此库进行熟悉使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用snabbdom 实现dom 更新操作</title>
</head>
<body>
<div id="app"></div>
<script src="node_modules/snabbdom/dist/snabbdom.js"></script>
<script src="node_modules/snabbdom//dist//snabbdom-style.js"></script>
<script>
// 响应式
const obj = {}
const {
init,
h
} = snabbdom
// 获取patch 函数 ,对比两个虚拟dom ,执行dom 操作
const patch = init([
snabbdom_style.default
])
let vnode // 保存之前旧的虚拟dom
function defineReactive(obj, key, val) {
//对传入obj 进行访问拦截
// 在每次执行defineReactive 时候，其实形成了一个闭包，因为在内部保留了一个内部作用域的变量 就是value
Object.defineProperty(obj, key, {
get() {
console.log('get', key)
return val;
},
set(newVal) {
if (newVal !== val) {
console.log('set' + key + ":" + newVal)
val = newVal
// 增加更新函数 因为数据变化要更新到视图上
update()
}
}
})
}
// 使用虚拟dom 做更新
function update() {
// // 以下是最简单的视图更新
// app.innerText = obj.foo
vnode = patch(vnode, h('div#app', {
style: {
color: "red"
}
},
obj.foo))
}
// defineReactive(obj, 'foo', '')
// obj.foo = new Date().toLocaleTimeString()
defineReactive(obj, 'foo', new Date().toLocaleTimeString())
//执行初始化
vnode = patch(app, h('div#app', obj.foo)) // 这种方式创建了一个虚拟dom
console.log(vnode)
setInterval(() => {
obj.foo = new Date().toLocaleTimeString()
}, 1000);
</script>
</body>
</html>优点
- 虚拟DOM 轻量、快速：当他们发生变化时通过新旧虚拟DOM的比对可以得到最小DOM操作量，从而提升性能
patch(vnode, h('div#app', obj.foo))
- 跨平台：将虚拟dom更新转换为不同运行时特殊操作实现跨平台
const patch = init([snabbdom_style.default])
patch(vnode, h('div#app', { style:{ color:'red'}}, obj.foo))
- 兼容性:还可以加入兼容性代码增强操作的兼容性。
必要性 （其实该研究研究Vue3.0 了）
整体流程
Q：虚拟DOM相关的源码应该从哪里开始？
//用户$mount()时，定义updateComponent
updateComponent = () => {
vm._update(vm._render(), hydrating)
}_render core/instance/render.js
生成虚拟dom ，render()函数计算除了最新的虚拟dom ,update 则是让render 函数计算出来的虚拟dom 变成真实dom 。
_update core\instance\lifecycle.js
update负责更新dom，转换vnode为dom
patch获取
export function createPatchFunction(backend) {
let i, j
const cbs = {}
const {
modules,
nodeOps
} = backend
patch实现
首先进行树级别比较，可能有三种情况：增删改。
new VNode不存在就删；
old VNode不存在就增；
都存在就执行diffff执行更新
精力耗尽 虚拟DOM 这块还在尽量多的理解。
业精于勤 荒于嬉
智能推荐
JWT(Json Web Token)实现无状态登录_无状态token登录-程序员宅基地
文章浏览阅读685次。1.1.什么是有状态？有状态服务，即服务端需要记录每次会话的客户端信息，从而识别客户端身份，根据用户身份进行请求的处理，典型的设计如tomcat中的session。例如登录：用户登录后，我们把登录者的信息保存在服务端session中，并且给用户一个cookie值，记录对应的session。然后下次请求，用户携带cookie值来，我们就能识别到对应session，从而找到用户的信息。缺点是什么？服务端保存大量数据，增加服务端压力 服务端保存用户状态，无法进行水平扩展 客户端请求依赖服务.._无状态token登录
SDUT OJ逆置正整数-程序员宅基地
文章浏览阅读293次。SDUT OnlineJudge#include<iostream>using namespace std;int main(){int a,b,c,d;cin>>a;b=a%10;c=a/10%10;d=a/100%10;int key[3];key[0]=b;key[1]=c;key[2]=d;for(int i = 0;i<3;i++){ if(key[i]!=0) { cout<<key[i.
年终奖盲区_年终奖盲区表-程序员宅基地
文章浏览阅读2.2k次。年终奖采用的平均每月的收入来评定缴税级数的，速算扣除数也按照月份计算出来，但是最终减去的也是一个月的速算扣除数。为什么这么做呢，这样的收的税更多啊，年终也是一个月的收入，凭什么减去12*速算扣除数了？这个霸道（不要脸）的说法，我们只能合理避免的这些跨级的区域了，那具体是那些区域呢？可以参考下面的表格：年终奖一列标红的一对便是盲区的上下线，发放年终奖的数额一定一定要避免这个区域，不然公司多花了钱..._年终奖盲区表
matlab 提取struct结构体中某个字段所有变量的值_matlab读取struct类型数据中的值-程序员宅基地
文章浏览阅读7.5k次，点赞5次，收藏19次。matlab结构体struct字段变量值提取_matlab读取struct类型数据中的值
Android fragment的用法_android reader fragment-程序员宅基地
文章浏览阅读4.8k次。1，什么情况下使用fragment通常用来作为一个activity的用户界面的一部分例如, 一个新闻应用可以在屏幕左侧使用一个fragment来展示一个文章的列表,然后在屏幕右侧使用另一个fragment来展示一篇文章 – 2个fragment并排显示在相同的一个activity中,并且每一个fragment拥有它自己的一套生命周期回调方法,并且处理它们自己的用户输_android reader fragment
FFT of waveIn audio signals-程序员宅基地
文章浏览阅读2.8k次。FFT of waveIn audio signalsBy Aqiruse An article on using the Fast Fourier Transform on audio signals. IntroductionThe Fast Fourier Transform (FFT) allows users to view the spectrum content of _fft of wavein audio signals
随便推点
Awesome Mac：收集的非常全面好用的Mac应用程序、软件以及工具_awesomemac-程序员宅基地
文章浏览阅读5.9k次。https://jaywcjlove.github.io/awesome-mac/ 这个仓库主要是收集非常好用的Mac应用程序、软件以及工具，主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》，于是建了这么一个仓库，持续更新作为补充，搜集更多好用的软件工具。请Star、Pull Request或者使劲搓它 issu_awesomemac
java前端技术---jquery基础详解_简介java中jquery技术-程序员宅基地
文章浏览阅读616次。一.jquery简介 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互 jQuery 的功能概括1、html 的元素选取2、html的元素操作3、html dom遍历和修改4、js特效和动画效果5、css操作6、html事件操作7、ajax_简介java中jquery技术
Ant Design Table换滚动条的样式_ant design ::-webkit-scrollbar-corner-程序员宅基地
文章浏览阅读1.6w次，点赞5次，收藏19次。我修改的是表格的固定列滚动而产生的滚动条引用Table的组件的css文件中加入下面的样式：.ant-table-body{ &amp;::-webkit-scrollbar { height: 5px; } &amp;::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box..._ant design ::-webkit-scrollbar-corner
javaWeb毕设分享 健身俱乐部会员管理系统【源码+论文】-程序员宅基地
文章浏览阅读269次。基于JSP的健身俱乐部会员管理系统项目分享:见文末!
论文开题报告怎么写？_开题报告研究难点-程序员宅基地
文章浏览阅读1.8k次，点赞2次，收藏15次。同学们，是不是又到了一年一度写开题报告的时候呀？是不是还在为不知道论文的开题报告怎么写而苦恼?Take it easy!我带着倾尽我所有开题报告写作经验总结出来的最强保姆级开题报告解说来啦，一定让你脱胎换骨，顺利拿下开题报告这个高塔，你确定还不赶快点赞收藏学起来吗？_开题报告研究难点
原生JS 与 VUE获取父级、子级、兄弟节点的方法 及一些DOM对象的获取_获取子节点的路径 vue-程序员宅基地
文章浏览阅读6k次，点赞4次，收藏17次。原生先获取对象var a = document.getElementById("dom");vue先添加ref <div class="" ref="divBox">获取对象let a = this.$refs.divBox获取父、子、兄弟节点方法var b = a.childNodes; 获取a的全部子节点 var c = a.parentNode; 获取a的父节点var d = a.nextSbiling; 获取a的下一个兄弟节点 var e = a.previ_获取子节点的路径 vue