写完这个就差不多了,准备干新项目了。

  确实挺不擅长写东西,感觉都是罗列代码写点注释的感觉,这篇就简单阐述一下数据变动时DOM是如何更新的,主要讲解下其中的diff算法。

  先来个正常的html模板:

    <body>
<div id='app'>
<div v-for="item in items">{{item}}</div>
<div @click='click'>click me!</div>
</div>
</body>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
items: [1]
},
methods: {
click: function() {
this.items.push(2);
}
}
})

  页面上有一个通过v-for渲染的div,还有一个按钮,点击按钮时会让div数量+1。

  

  首先需要提到的是,每一次渲染DOM,都会保存一份当前虚拟DOM的副本挂载到_vnode属性上,如图:

  点击前,整个VNode结构为:根节点及3个子节点,子节点均包含2个div标签和一个空白文本节点,div包含对应的文本节点。

  点击后,由于vue劫持了部分数组方法,所以会进入自定义的push方法中,将弹入的新元素进行广播,过程就不看了。

  完成数组添加后,会生成一个新的render函数与新的VNode,diff算法就是比较新旧VNode的差异,通过最小的变化操作渲染新的DOM。

  讲VNode的diff算法之前,有一个小点先讲一下:如何判断当前VNode可复用?

  销毁一个DOM节点并创建一个新的再插入是消耗非常大的,无论是DOM对象本身的复杂性还是操作引起的重绘重排,所以虚拟DOM的目标是尽可能复用现有DOM进行更新。

  其中涉及的概念就是新的VNode能否在旧的基础上修改并复用呢?有一个函数就是做这个判断的:

    function sameVnode(a, b) {
return (
// key来源于v-for或者自定的:key属性
a.key === b.key &&
a.tag === b.tag &&
a.isComment === b.isComment &&
isDef(a.data) === isDef(b.data) &&
sameInputType(a, b)
)
}

  该判断有5重标准:

  (1)key:key属性如果没有设置默认是undefined,当且仅当v-for的列表渲染中会给节点加一个唯一的key,形式如图:,key不一样的节点不进行复用,官方文档也有说明设置key属性可以强制重新生成一个新DOM。

  (2)tag:复用的节点必须保证标签名一致,毕竟没有更改tag名的API

  (3)isComment:注释与普通的DOM不是一个次元,所以需要判断

  (4)isDef(*.data):这个涉及属性的更新,如果一个节点没有任何属性,即data为undefined,与一个有data属性的节点进行更新不如直接渲染一个新的

  (5)sameInputType:这个主要是input标签type属性异同判断,不同的type相当于不同的tag

  如果均满足,可以判定该节点可复用。

  前面说了,每一个更改数据源,会生成一个新的VNode,来与旧的VNode进行比较,节点间的比较无非是判断是否可复用,再进行属性置换。

  而diff算法主要是针对子节点的更新,即两个数组之间的异同比较与更新。

  一个数组的变化无非3个状态:增、删、改,但是其中增删会涉及数组索引与对应元素的变动,总体来讲还是比较复杂的。

  源码中有一个函数专门处理子节点比较,整体如下:

    function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
// var...
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
// 旧VNode不存在
if (isUndef(oldStartVnode)) {
// ...
} else if (isUndef(oldEndVnode)) {
// ...
} else if (sameVnode(oldStartVnode, newStartVnode)) {
// ...
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// ...
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
// ...
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
// ...
} else {
// ...
}
}
if (oldStartIdx > oldEndIdx) {
// ...
} else if (newStartIdx > newEndIdx) {
// ...
}
}

  第一次看还是比较懵逼的,主路线while循环中有7重判断,分别对应7种情况。

  分解本例中的情况,不贴代码,尝试画个图:

  

  对比新旧VNode,可以看出新的VNode在索引0的后面插入了一个新的tag

  接下来通过updateChildren函数进行比较,有很多的变量,这里还需要一个图:

  在函数中有8个变量,其中4个旧VNode,4个新VNode,分别是一一对应的,解释一半就行了:

    var oldStartIdx = 0;
var newStartIdx = 0;
var oldEndIdx = oldCh.length - 1;
var oldStartVnode = oldCh[0];
var oldEndVnode = oldCh[oldEndIdx];
var newEndIdx = newCh.length - 1;
var newStartVnode = newCh[0];
var newEndVnode = newCh[newEndIdx];

  (1)oldStartIdx => 从前往后的旧VNode数组索引,初始化时为0 => 简称为前索引

  (2)oldStartVnode => 对应索引的旧VNode元素 => 简称为前元素

  (3)oldEndIdx => 从后往前的旧VNode数组索引,初始化为children的数组长度 => 简称为后索引

  (4)oldEndVnode => 对应索引的旧Vnode元素 => 简称为后元素

  后面的阐述全部用简称,不然太难讲了,并且新VNode的数组简称newCh,旧VNode的数组简称oldCh

  另外4个变量只是将old更换为new,并对应新VNode的索引与元素。

  

  接下来是一个大while循环,终止条件是前索引大于后索引(newCh或oldCh):

    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (isUndef(oldStartVnode)) {
// ...
} else if (isUndef(oldEndVnode)) {
// ...
} else if (sameVnode(oldStartVnode, newStartVnode)) {
// ...
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// ...
} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
// ...
} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
// ...
} else {
// ...
}
}

  由于有几种情况我模拟不出来,只能大概过一下。

1、isUndef(oldStartVnode)、isUndef(oldEndVnode)

  前两种是oldCh前元素oldCh后元素不存在,我能模拟的情况是当oldCh中没有元素时,会出现这种情况。

  这时只是单纯加前索引加1或者后索引减1,而oldCh长度此时为0,会立即跳出while循环,进入下一步。

2、sameVnode(a,b)

  下面的的4种情况都是判断节点是否可复用,然后进行更新。其中对比的情况有4对:

  oldCh前元素 => newCh前元素

  oldCh后元素 => newCh后元素

  oldCh前元素 => newCh后元素

  oldCh后元素 => newCh前元素 

  取第一种情况来说,如果比较通过,说明oldCh前元素可以被复用,随即调用patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)来对DOM进行更新,由于tag是不变的,可以直接对DOM进行各种API调用,比如说事件更改,只要remove旧事件,add新事件就行,这里只是DOM对象的属性更改,不会影响到DOM的增删。

  当patch完毕后,会将oldCh前索引newCh的前索引加1,并更新对应的元素,然后进入下一轮循环。

  画一轮图解释:

  

  此时第一个子节点已经更新完毕,然后重新开始对比,如果oldCh与newCh的索引1处也可复用,会再次更新并加1,直到前索引大于后索引时,说明所有可能的比较都进行完毕。

  这里的4种比较没有必要重复过一遍,如果是前索引就加1,后索引就减1。

3、else{...}

  最后一种情况是需要强制更新元素时才会有的情况,比如:

    <body>
<div id='app'>
<div v-if="!vIfIter" key='o'>old Ele1</div>
<div v-if="vIfIter" key='n'>new Ele</div>
<div @click='click'>click me!</div>
</div>
</body>
<script src='./vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
vIfIter: false
},
methods: {
click: function() {
this.vIfIter = true;
}
}
})
</script>

  此时,由于设置了单独的key值,所以div被标记为不可复用,跳过了所有判断进入了else阶段:

    // 这里将旧VNode中剩余的元素key值作为对象输出
if (isUndef(oldKeyToIdx)) {
oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
}
// 判断新VNode中是否存在可复用的元素
idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null;
// 不存在就创建一个新的插入DOM中
if (isUndef(idxInOld)) {
// New element
}
// 存在
else {
elmToMove = oldCh[idxInOld];
if (sameVnode(elmToMove, newStartVnode)) {
// 更新VNode
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
// 把旧的VNode置空 此处会触发到while循环的前两个判断
oldCh[idxInOld] = undefined;
// 移动更新后的VNode
canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm);
newStartVnode = newCh[++newStartIdx];
}
// 同样的key值不同的tag 创建新DOM插入
else {
// same key but different element. treat as new element
}
}

  简单来讲还是可复用就复用,不可复用创建新DOM插入。

  最后来看看while循环跳出来的语句,其实很简单:

    // VNode数量增加了
if (oldStartIdx > oldEndIdx) {
// 如果VNode是中间插入就会存在refElm
// 否则refElm为null 调用insertBefore会将DOM插入父元素尾部
refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
}
// 减少了
else if (newStartIdx > newEndIdx) {
// 移除多出来的DOM节点
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
}

  至此,所有的分析完了,上面的案例有兴趣可以自己跑跑。

  

  不容易啊,写完了。。。已经入行5个月,由于没有什么好项目练手,只能看源码提升基本功,接下来可能很长时间不写博客了。(反正也没人看,啊哈哈哈哈~)

  (定个小目标,Codewars刷到3kyu,加油!)

Vue源码终笔-VNode更新与diff算法初探的更多相关文章

  1. vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 (diff部分待后续更新)

    vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...

  2. Vue 源码解读(4)—— 异步更新

    前言 上一篇的 Vue 源码解读(3)-- 响应式原理 说到通过 Object.defineProperty 为对象的每个 key 设置 getter.setter,从而拦截对数据的访问和设置. 当对 ...

  3. 大白话Vue源码系列(05):运行时鸟瞰图

    阅读目录 Vue 实例的生命周期 实例创建 响应的数据绑定 挂载到 DOM 节点 结论 研究 runtime 一边 Vue 一边源码 初看 Vue 是 Vue 源码是源码 再看 Vue 不是 Vue ...

  4. 入口文件开始,分析Vue源码实现

    Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...

  5. 入口开始,解读Vue源码(一)-- 造物创世

    Why? 网上现有的Vue源码解析文章一搜一大批,但是为什么我还要去做这样的事情呢?因为觉得纸上得来终觉浅,绝知此事要躬行. 然后平时的项目也主要是Vue,在使用Vue的过程中,也对其一些约定产生了一 ...

  6. 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...

  7. 【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码

    前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...

  8. 前端Vue 源码分析-逻辑层

    Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...

  9. 学习 vue 源码 -- 响应式原理

    概述 由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教. vue 主要通过 Watcher.Dep 和 Observer 三个类来实现响应式视图.另外还有一个 sch ...

随机推荐

  1. WEB前端面试真题 - 2000!大数的阶乘如何计算?

    HTML5学堂-码匠:求某个数字的阶乘,很难吗?看上去这道题异常简单,却不曾想里面暗藏杀机,让不少前端面试的英雄好汉折戟沉沙. 面试真题题目 如何求"大数"的阶乘(如1000的阶乘 ...

  2. jmeter 压测最近的心得体会

    笔者14年入坑测试,截止到17年年初一直在游戏公司,压测,我都没有怎么用过,特别是jmeter去压测,自己学习,可是先找到切入点,于是乎, 其实也算是我学习后,先找一个更大的平台吧,我聊了几个游戏公司 ...

  3. Redis学习笔记之二 :在Java项目中使用Redis

    成功配置redis之后,便来学习使用redis.首先了解下redis的数据类型. Redis的数据类型 Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set( ...

  4. nmcli命令大集合

    nmcli命令 地址配置工具:nmcli nmcli  device  查看所有网卡的信息 nmcli  device  status 和numcli device 相同 nmcli  device ...

  5. 用vue开发一个app(3,三天的成果)

    前言 一个vue的demo 源码说明 项目目录说明 . |-- config // 项目开发环境配置 | |-- index.js // 项目打包部署配置 |-- src // 源码目录 | |-- ...

  6. scoke摘要

      登录|注册     关闭 永不磨灭的意志 /* ----------------500G的电影拷到了U盘上,U盘的重量会不会增加?----------------------*/       目录 ...

  7. VacmMIB

    VACM 基于视图的访问控制模型  是SNMPV3对MIB中被管对象的访问进行控制的模型 特点: 1.VACM 确定是否允许用户访问本地MIB的被管理对象.当用户请求消息到达代理的命令响应器时,命令响 ...

  8. 关于 HashTable

    hashTable 的一些认识: 底层使用散列表,存贮键值对,键值非null 使用synchronize 保证线程安全 (线程安全) ■全局变量 //The hash table data. //底层 ...

  9. numpy学习整理

    今天先整理到这里,剩下的下次再整理 1.改变形状: reshape()返回改变的数组形状,但无法改变源数组形状 resize() 可以改变源数组形状 ravel() 输出类似C数组的列表,和resha ...

  10. windows phone 模拟器

    window phone 模拟器启动报错 修改Bios设置,我的是yoga pro 2,只修改 即可.启动成功