Vue中的diff算法探析

一、什么是diff

 diff 是什么？diff 就是比较两个树，render 会生成两颗树，一个新树 newVnode,一棵旧树oleVnode。然后两棵树进行对比更新差异就是 diff ,全称是 difference, 在 vue 里面diff 算法就是通过 patch 函数来完成的，所有有的时候也叫 patch 算法。

二、diff什么时候会发生

　　diff 发生在什么时候？我们可以说是在数据更新的时候发生的 diff ，因为数据更新会运行 render 函数得到虚拟的 dom 树，最后页面重新渲染。

　　当组件创建的时候，组件所依赖的属性或者数据发生了改变的时候，会运行一个函数（下面代码中的updateComponent）,该函数会做两件事：

　　* 运行_render 生成一个新的虚拟 dom 树；

　　* 运行 _updata, 传入的_render 生成虚拟的 dom 树，将他和旧的虚拟 dom 树来进行对比，最后完成真实 dom 的更新。

复制代码
// vue构造函数
function Vue(){
  // ... 其他代码
  var updateComponent = () => {
    this._update(this._render());
  }
  new Watcher(updateComponent);
  // ... 其他代码
}
复制代码

　　_render 函数生成一个新的虚拟的dom 树，然后把他传递到 _update 里面，然后再将 updateComponent 传递给 watcher ,watcher 会监测函数的执行的过程，检测函数执行期间用到了哪些响应式数据并且进行依赖收集，关于watcher可以看https://www.cnblogs.com/zhilili/p/14734468.html

三、_update函数的作用

 

update 函数会接受一个vnode 参数，这是新生成的虚拟 dom 树，同时， _update 函数会通过当前组件的 _vnode 属性，拿到旧的虚拟 dom 树，_update 函数首先会给组件的 _vnode 属性重新赋值，然后让它指向新树。用代码表示如下：

function update(vnode){
  // vnode 新树
  // this._vnode 旧树
  this._vnode=vnode
}

　　如果是只是更新虚拟的 dom 树，这样就可以了，但是我们是要更新页面，所以要将 diff 进行树的节点对比，所以可以保存下旧树 oldVnode 来进行对比，用代码表示如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
  <div id='app'></div>
  <script src="./vue.js"></script>
  <script>
    const vm=new Vue({
      el:"#app",
    })
    function update(vnode){
      let oldVnode = vm._vnode; // 保存旧树
      this._vnode=vnode // 更新新树
    }
  </script>
</body>

　　

四、patch函数的节点对比流程

 

1.根节点进行比较：patch 函数首先对根节点进行比较

 

 

 

如果两个节点【相同】，则进入【更新】流程：

（1）将旧节点的真实 dom 赋值给新节点： newVnode.elm=oldVnode.elm,旧节点会被垃圾回收系机制回收；

（2）对比旧节点和新节点的属性，有变化的更新到真实的 dom 中；

（3）当前新旧两个节点处理完成，开始【对比子节点】

如果两个节点不【相同】：

（1）新节点【递归】，【新建元素】

（2）旧节点【销毁元素】

 

2.对比子节点：虚拟 dom 树已经完成了，就剩修改真实的 dom 了，但是修改真实 dom 的效率是比较耗时的，vue 的原则是能不改就不改，尽量什么也不做，在【对比子节点】时，vue 的一切出发点都是为了：

　　* 尽量什么也不做

　　* 不行的话，就仅仅修改元素的属性

　　* 还不行的话，尽量移动元素，而不是删除和创建元素

　　* 实在不行的话，就创建和删除元素

 

posted @   YJ-Alex  阅读(114)  评论(0)  编辑  收藏  举报
相关博文：
· 知行 技术人员的管理之路 笔记
· vue diff算法
· 【Vue面试题】谈谈你对Vue的diff算法的理解
· 讲讲Vue diff算法
· 探究vue的diff算法
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示