[Vue源码解析] patching算法

pathching算法：通过对比新旧VNode的不同，然后找出需要更新的节点进行更新

操作：1、创建新增节点 2、删除废弃节点 3、修改需要更新的节点

创建节点的三种类型：1、元素节点（tag属性）：document.createElement 2、text属性（text属性和isComment属性为false）:document.createTextNode

3、注释节点（text属性和isComment属性为true）:document.createComment

删除节点：

1、删除多个节点：

function removeVnodes (vnodes, startIdx, endIdx) {for (; startIdx <= endIdx; ++startIdx) {const ch = vnodes[startIdx]if (isDef(ch)) {removeNode(ch.elm)}}
}

2、删除单个节点

const nodeOps = {removeChild (node, child) {node.removeChild(child)}
}function removeNode (el) {const parent = nodeOps.parentNode(el)if (idDef(parent)) {nodeOps.removeChild(parent, el)}
}

更新节点：

1、静态节点不需要进行更新，所以更新时首先要判断新旧VNode的该节点是否是静态节点，至于判断依据，在模版解析为AST（抽象语法树）后，会遍历AST找出静态节点做上标记。

2、NewVNode上如果有text属性，直接调用node.TextContent方法进行文本更新。

3、NewVnode没有文本属性时，判断其是否有children属性，没有则其是空节点，直接清空dom上对应节点；如果不为空，则需对NewVNode和OldVMNode上的children节点进行对比才能做出更新。

更新子节点：

先说最垃圾的比对新旧VNode上子节点的方法：从新节点上按顺序取出一个子节点，来和OldVNode的所有children节点进行一一对比，找到且位置相同则更新，找到但位置不同则移动且更新（移动到未处理节点的前面），找不到则插入（插入到DOM中未处理节点前面），在处理过后的新旧VNodeChild上都标记为已处理，若遍历完newVNodeChildren后oldVNode还有child，说明这些节点是废弃的，则进行删除。

优化策略：

都说了上面是最垃圾的算法了，在实际情况中大多数VNode的节点位置其实根本没有发生变化，所以我们只需要对比相同索引位置的新旧VNodeChild就可以了。

方法：1、新未处理第一个比对旧未处理第一个

2、新未处理最后一个对比新未处理最后一个

3、新未处理第一个对比旧未处理最后一个

4、新未处理最后一个对比旧未处理第一个

在以上对比过后如果还没有找到NewVNodeChild在OldVNodeChildren中的位置，再采用循环的笨办法进行寻找。

在这里就要特别提一下key的作用了，在循环时添加key属性就可以建立起key值与数组索引的对应关系，也就是说不要要再去比对新旧VNodeChildren了，直接通过key：index的对应关系便可以快速地找到新旧子节点的位置，这也是Vue为什么推荐我们使用key的原因。

[Vue源码解析] patching算法相关推荐

Vue源码解析（尚硅谷）
视频地址:Vue源码解析系列课程一.Vue源码解析之mustache模板引擎 1. 什么是模板引擎模板引擎是将数据要变为视图最优雅的解决方案历史上曾经出现的数据变为视图的方法 2. mustac ...
【vuejs深入三】vue源码解析之二 htmlParse解析器的实现
写在前面一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...
Vue源码解析(一)
前言:接触vue已经有一段时间了,前面也写了几篇关于vue全家桶的内容,感兴趣的小伙伴可以去看看,刚接触的时候就想去膜拜一下源码~可每次鼓起勇气去看vue源码的时候,当看到几万行代码的时候就直接望而却 ...
Vue源码解析：虚拟dom比较原理
通过对 Vue2.0 源码阅读,想写一写自己的理解,能力有限故从尤大佬2016.4.11第一次提交开始读,准备陆续写: 模版字符串转AST语法树 AST语法树转render函数 Vue双向绑定原理 V ...
Vue源码解析之数组变异
力有不逮的对象众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式 ...
Vue源码解析之Template转化为AST的实现方法
什么是AST 在Vue的mount过程中,template会被编译成AST语法树,AST是指抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree) ...
Vue源码解析之函数入口
从入口开始看起写博客就是记录自己撸码的过程和问题,好了~废话就不多说了,直接源码撸起,通过上一篇博客咱们大致知道了Vue源码目录设计,下面我们要一步步找到vue的入口通过查看package.jso ...
Vue源码解析(笔记)
github vue源码分析认识flow flow类型检查安装flow sudo npm install -g flow-bin 初始化flow flow init 运行flow命令命令: fl ...
Vue源码解析-$mount
前言 Vue实例是通过mount方法进行挂载的,上一篇说了new Vue这篇分析一下mount挂载方法.mount的定义在Vue源码中有多处,这是因为Vue需要适配不同的平台以及构建方式,本文这里主要 ...

[Vue源码解析] patching算法

[Vue源码解析] patching算法

[Vue源码解析] patching算法相关推荐

最新文章

热门文章