详解vue3.0 diff算法的使用(超详细)

2020-07-01 13:01 来源:易采站长站 作者:王冬梅 点击: 评论:

A-A+

原标题:详解vue3.0 diff算法的使用(超详细)

前言:随之vue3.0beta版本的发布,vue3.0正式版本相信不久就会与我们相遇。尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持,proxy响应式原理,重新虚拟dom,优化diff算法性能提升等等。小编在这里仔细研究了vue3.0beta版本diff算法的源码,并希望把其中的细节和奥妙和大家一起分享。

首先我们来思考一些大中厂面试中,很容易问到的问题:

1 什么时候用到diff算法,diff算法作用域在哪里?

2 diff算法是怎么运作的,到底有什么作用?

3 在v-for 循环列表 key 的作用是什么

4 用索引index做key真的有用? 到底用什么做key才是最佳方案。

如果遇到这些问题,大家是怎么回答的呢?我相信当你读完这篇文章,这些问题也会迎刃而解。

一 什么时候用到了diff算法,diff算法作用域?

 1.1diff算法的作用域

 patch概念引入

在vue update过程中在遍历子代vnode的过程中,会用不同的patch方法来patch新老vnode,如果找到对应的 newVnode 和 oldVnode,就可以复用利用里面的真实dom节点。避免了重复创建元素带来的性能开销。毕竟浏览器创造真实的dom,操纵真实的dom,性能代价是昂贵的。

patch过程中,如果面对当前vnode存在有很多chidren的情况,那么需要分别遍历patch新的children Vnode和老的 children vnode。

存在chidren的vnode类型

首先思考一下什么类型的vnode会存在children。

①element元素类型vnode

第一中情况就是element类型vnode 会存在 children vode,此时的三个span标签就是chidren vnode情况

<div>
  <span> 苹果🍎 </span> 
  <span> 香蕉🍌 </span>
  <span> 鸭梨🍐 </span>
</div>

在vue3.0源码中 ,patchElement用于处理element类型的vnode ②flagment碎片类型vnode

在Vue3.0中,引入了一个fragment碎片概念。

你可能会问,什么是碎片?如果你创建一个Vue组件,那么它只能有一个根节点。

<template>
  <span> 苹果🍎 </span> 
  <span> 香蕉🍌 </span>
  <span> 鸭梨🍐 </span>
</template>

这样可能会报出警告,原因是代表任何Vue组件的Vue实例需要绑定到一个单一的DOM元素中。唯一可以创建一个具有多个DOM节点的组件的方法就是创建一个没有底层Vue实例的功能组件。

flagment出现就是用看起来像一个普通的DOM元素,但它是虚拟的,根本不会在DOM树中呈现。这样我们可以将组件功能绑定到一个单一的元素中,而不需要创建一个多余的DOM节点。

 <Fragment>
  <span> 苹果🍎 </span> 
  <span> 香蕉🍌 </span>
  <span> 鸭梨🍐 </span>
</Fragment>

【易采站长站编辑:秋军】