关于算法:越来越受欢迎的Vue想学么90后小姐姐今儿来教你

摘要：Vue 的相干技术原理成为了前端岗位面试中的必考知识点，把握 Vue 对于前端工程师来说更像是一门“必修课”。

本文原作者为尹婷，善于前端组件库研发和微信机器人。

咱们发现，Vue 越来越受欢迎了。

不论是 BAT 大厂，还是守业公司，Vue 都被宽泛的利用。比照 Angular 和 React，三者都是十分优良的前端框架，但从 GitHub 上来看，Vue 曾经达到了 170 万的 Star。Vue 的相干技术原理也成为了前端岗位面试中的必考知识点，把握 Vue 对于前端工程师来说更像是一门“必修课”。为此，华为云社区邀请了 90 后前端开发工程师尹婷带来了《Vue3.0 新个性介绍以及搭建一个 vue 组件库》的分享。

Vue.js 是一个 JavaScriptMVVM 库，是一套构建用户界面的渐进式框架。在 2019 年 10 月 05 日凌晨，Vue3 的源代码 alpha。目前曾经公布正式版，作者示意，Vue 3.0 具备六大个性：Tree Shaking；Composition；Fragment；Teleport；Suspense；渲染 Performance。渲染 Performance 次要是框架外部的性能优化，绝对比拟底层，本文会次要为大家介绍前四个个性的解读。

大多数编译器都会为咱们的代码进行一个死代码的去除工作。首先咱们要理解一下，什么是死代码呢？

以下几个个性的代码，咱们把它称之为死代码：代码不会被执行，不可达到；代码执行的后果不会被用到；代码只会影响死变量（只写不读）。比方咱们给一个变量赋值，然而并没有去用这个变量，那么这就是一个死变量。这就是在咱们定义阶段会把它去除的一部分，比如说 roll up 打消死代码的工作。

如上图示例，右边是开发的源码提供的两个函数，但最终只用到了 baz 函数。在最初打包的时候，会把 foo 函数去除掉，只把 baz 这个函数打包进浏览器外面运行。Tree Shaking 是打消死代码的一种形式，更关注于无用模块的打消，打消那些援用了但并没有被应用的模块。

右边这块代码，export 有两个函数，一个是 post，一个是 get，然而在咱们生产里边真正应用到只有 post。那么 rollup 在打包之后，就会间接打消掉 get 的函数，而后只把 post 的函数打包进入咱们的生产里。除了 rollup 反对这个个性外，webpack 也反对。

接下来，咱们看一下 VUE3.0 对 Tree Shaking 的反对都做了哪些事件？

首先以 VUE2 和 VUE3 对 nextTick 的应用进行比照：VUE2 把 nextTick 挂载到 VUE 实例上的一个 global API 式；VUE3 先把 nextTick 模块剔除，在要应用的时候，再把这个模块引入。
通过这个比照，咱们能够看到应用 VUE2 的时候，即便没有 nextTick 或者其余办法，但因为它是一个 GLOBA API，它肯定会被挂载到一个实例上，最初打包生产代码的时候，会把这个函数给打包进去，这一段代码进而也会影响到文件体积。在 VUE3.0 如果不须要这个模块的话，最初打包的这个文件里边就不会有这一块代码。通过这种形式就缩小了最初生产代码的体积。

当然，不只是 nextTick，在 VUE3.0 外部也做了其余很多 tree-shaking。例如：如果不应用 keep-alive 组件或 v -show 指令，它会少引入很多跟 keep-alive 或者 v -show 不相干的包。

上图为 Vue2.0 的这段代码，右边是引入 utils 函数，而后把这个函数指为 mixins。这一段代码是在 Vue2 里边是最罕用到的，但这段代码是有问题的。

如果对这个我的项目不相熟，第一次看到这个代码的时候，因为不晓得这个 utils 里边有哪些属性和办法，也就是说这个 mixins 对于开发者就是个黑盒。很容易遇到一种场景：在开发组件初期，利用了 mixins 的一个办法，当初不须要应用该办法了，在删除的过程发现不晓得其余的中央是否援用过 mixins 其余的属性和办法。

如果应用的是 Vue3.0 的 Composition，该怎么躲避这个问题呢？如上图所示，假如它是一个组件实例，咱们应用 useMouse 函数并返回了 X 和 Y 两个变量。从右边代码能够看到 useMouse 函数就是根，它监听了鼠标的挪动事件之后，返回了鼠标的 XY 坐标。通过这种形式来组织代码，就能够很明确的晓得这个函数返回的变量和扭转的值。

接下来咱们再看一个 Composition 的例子：右边是在 Vue2 中最罕用的一段代码，首先在 data 里边申明 first name 和 last name，而后在回帖的时候去申请接口，拿到接口返回到值，在 computed 之后获取他的 full Name。那么，这段代码的问题是什么呢？

这里的 computed，因为咱们不晓得返回的 full Name 的逻辑是什么。在获取了 data 之后，是心愿通过 data 的返回值来拿到它的 first name 和 last name，而后来获取它的 full name。然而这一段代码的逻辑在获取接口之后就曾经断掉，这就是 Vue2.0 设计不合理的一个中央，导致咱们的逻辑是决裂派的，决裂在个配置下。那么，如果用 Composition 的话，怎么样实现呢？

申请接口之后，间接拿到它的返回数据，而后把这个返回数据的值赋给 computed 函数里，这里就能够拿到 full Name。通过这段代码能够看到，逻辑是更加的聚合了。

如何做到应用 useMouse 函数，里边的变量也是可响应的。在 Vue 3.0 中提供了两个函数：reactive 和 ref。reactive 能够传一个对象进去，而后这个函数返回之后的 state，是可响应的；ref 是间接传一个值进去，而后返回到认识对象，它也是可响应的。如果咱们在 setup 函数里边返回一个可响应值的对象，是能够在字符串模板渲染的时候应用。比方，有时候咱们间接在批改 data 的时候，视图也会相应的扭转。

Vue2 中，个别会采纳 mixins 来复用逻辑代码，但存在一些问题：例如代码起源不清晰、办法属性等抵触。基于此，在 vue3 中引入了 Composition API（组合 API），应用纯函数分隔复用代码，和 React 中的 hooks 的概念很类似。

Composition 的长处是裸露给模板的属性起源清晰，它是从函数返回的；第二，能够进行逻辑重用；第三，返回值能够被任意的命名，不存在机密空间的抵触；第四，没有创立额定的组件实力带来的性能损耗。

以前咱们如果想要获取一个响应式的 data，咱们必须要把这个 data 放在 component 里边，而后在 data 里边进行申明，这样的话能力使这个对象是可响应的，当初可间接应用 reactive 和 ref 函数就能够使被保变成可响应的。

在书写 vue2 时，因为组件必须只有一个根节点，很多时候会增加一些没有意义的节点用于包裹。Fragment 组件就是用于解决这个问题的（这和 React 中的 Fragment 组件是一样的）。

Fragment 其实就是在 Vue2 的一个组间里边，它的 template 必须要有一个根的 DIV 把它包住，而后再写里边的 you。在 Vue3，咱们就不须要这个根的 DIV 来把这个组件包住了。上图就是 2 和 3 的比照。

Teleport 其实就是 React 中的 Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优良的计划。Teleport 提供一个 Teleport 的组件，会指定一个指标的元素，比如说这里指定的是 body，而后 Teleport 任何的内容都会渲染到这个指标元素中，也就是说上面的这一部分 Teleport 代码，它会间接渲染到 body。

那么对于 Teleport 利用的地位，咱们能够为大家举个例子来阐明一下。比如说咱们在做组件的时候，常常会实现一个 dialog。dialog 的背景是一个黑的铺满全屏 DIV，咱们对它的布局是 position: absolute。如果父级元素是 relative 布局，咱们的这个背景层就会受它的父元素的影响。那么此时，如果用 Teleport 间接把父组件定为 body，这样它就不会再受到副组件元素款式的影响，就能够确认一个咱们想要的彩色背景画。

上面我写一下 react 和 vue 的 diff 算法的比对, 我是一边写代码，一边写文章，整顿一下思路。注：这里只探讨 tag 属性雷同并且多个 children 的状况，不雷同的 tag 间接替换，删除，这没啥好写的。

用这个例子来阐明：

简略 diff，把原有的删掉，把更新后的插入。

变动前后的标签都是 li，所以只用比对 vnodeData 和 children 即可，复用原有的 DOM。

先只从这个例子登程, 我只用遍历旧的 vnode，而后把旧的 vnode 和新的 vnode patch 就行。

这样就省掉移除和新增 dom 的开销，当初的问题是，我的例子刚好是新旧 vnode 数量一样，如果不一样就有问题，示例改成这样：

实现思路改成：先看看是旧的长度长，还是新的长，如果旧的长，我就遍历新的，而后把多进去的旧节点删掉，如果新的长，我就遍历旧的，而后多进去的新 vnode 加上。

依然有可优化的空间，还是上面这幅图：

通过咱们下面的 diff 算法，实现的过程会比对 preve vnode 和 next vnode，标签雷同，则只用比对 vnodedata 和 children。发现

 标签的子节点（文本节点 a,b,c）不同，于是别离删除文本节点 a,b,c，而后从新生成新的文本节点 c,b,a。然而实际上这几个

 只是地位不同，那优化的计划就是复用曾经生成的 dom，把它挪动到正确的地位。

怎么挪动？咱们应用 key 来将新旧 vnode 做一次映射。

首先咱们找到能够复用的 vnode，能够做两次遍历，外层遍历 next vnode，内层遍历 prev vnode

如果 next vnode 和 prev vnode 只是地位挪动，vnodedata 和 children 没有任何变动，调用 patchVnode 之后不会有任何 dom 操作。
接下来只须要把这个 key 雷同的 vnode 挪动到正确的地位即可。咱们的问题变成了怎么挪动。

首先须要晓得两个事件:

· 每一个 prev vnode 都援用了一个实在 dom 节点，每个 next vnode 这个时候都没有实在 dom 节点。

· 调用 patchVnode 的时候会把 prevVnode 援用的实在 Dom 的援用赋值给 nextVnode，就像这样：

还是拿下面的例子，外层遍历 next vnode, 遍历第一个元素的时候，第一个 vnode 是 li©，而后去 prev vnode 里找，在最初一个节点找到了，这里外层是第一个元素，不做任何挪动的操作，咱们记录一下这个 vnode 在 prevVnode 中的索引地位 lastIndex，接下来在遍历的时候，如果 j <lastIndex，阐明本来 prevVnode 在后面的元素，在 nextVnode 中变到了前面来了，那么咱们就把 prevVnode[j]放到 nextVnode[i-1]的前面。

这里多说一句，dom 操作的 api 里，只有 insertBefore()，没有 insertAfter()。也就是说只有把某个 dom 插入到某个元素后面这个办法，没有插入到某个元素前面这个办法，所以咱们只能用 insertBefore()。那么思路就变成了，当 j <lastIndex 的时候，把 prevChildren[j]插入到 nextVnode[i-1]的实在 dom 的前面元素的后面。

当 j >=lastIndex 的时候，阐明这个程序是正确的的，不必挪动，而后把 lastIndex = j;
也就是说，只把 prevVnode 中前面的元素往前挪动，本来程序是正确的就不变。
当初咱们的 diff 的代码变成了这样：

同样的问题，如果新旧 vnode 的元素数量一样，那就曾经能够工作了。接下来要做的就是新增节点和删除节点。

首先是新增节点，整个框架中将 vnode 挂载到实在 dom 上都调用 patch 函数，patch 里调用 createElm 来生成实在 dom。依照下面的实现，如果 nextVnode 中有一个节点是 prevVnode 中没有的，就有问题：

在 prevVnode 中找不到 li(d)，那咱们须要调用 createElm 挂在这个新的节点，因为这里的节点须要超入到 li(b)和 li©之间，所以须要用 insertBefore()。在每次遍历 nextVnode 的时候用一个变量 find=false 示意是否可能在 prevVnode 中找到节点，如果找到了就 find=true。如果内层遍历后 find 是 false，那阐明这是一个新的节点。

咱们的 createElm 函数须要判断一下第四个参数，如果没有就是用 appendChild 间接把元素放到父节点的最初，如果有第四个参数，则须要调用 insertBefore 来插入到正确的地位。

接下来要做的是删除 prevVnode 多余节点：

在 nextVnode 中曾经没有 li(d)了，咱们须要在执行完下面所讲的所有流程后在遍历一次 prevVnode，而后拿到 nextVnode 里去找，如果找不到雷同 key 的节点，那就阐明这个节点曾经被删除了，咱们间接用 removeChild 办法删除 Dom。

残缺的代码：https://github.com/TingYinHelen/tempo/blob/main/src/platforms/web/patch.js 在 react-diff 分支(目前有可能代码仓库还没有开源，等我实现更欠缺的时候会开源进去，我的项目构造可能有变动，看 tempo 仓库就行)

这里我的代码实现的 diff 算法很显著看进去工夫复杂度是 O(n2)。那么这里在算法上仍然又能够优化的空间，这里我把 nextChildren 和 prevChildren 都设计成了数组的类型，这里能够把 nextChildren、prevChildren 设计成对象类型，用户传入的 key 作为对象的 key，把 vnode 作为对象的 value，这样就能够只循环 nextChildren，而后通过 prevChildren[key]的形式找到 prevChidren 中可复用的 dom。这样就能够把工夫复杂度降到 O(n)。

以上就是 react 的 diff 算法的实现。

先说一下下面代码的问题，举个例子，上面这个状况：

如果依照 react 的办法，整个过程会挪动 2 次：
li©是第一个节点，不须要挪动，lastIndex=2
li(b), j=1, j<lastIndex, 挪动到 li©前面 (第 1 次挪动)
li(a), j=0, j<lastIndex, 挪动到 li(b)前面 (第 2 次挪动)

首先找到四个节点 vnode：prev 的第一个，next 的第一个，prev 的最初一个，next 的最初一个，而后别离把这四个节点作比对：1. 把 prev 的第一个节点和 next 的第一个比对；2. 把 prev 的最初一个和 next 的最初一个比对；3.prev 的第一个和 next 的最初一个；4. next 的第一个和 prev 的最初一个。如果找到雷同 key 的 vnode，就做挪动，挪动后把后面的指针往后挪动，前面的指针往前挪动，直到前后的指针重合，如果 key 不雷同就只 patch 更新 vnodedata 和 children。上面来走一下流程：

li(a)和 li(b)，key 不同，只 patch，不挪动
li(d)和 li(d)，key 雷同，先 patch，须要挪动挪动，挪动的办法就是把 prev 的 li(d)挪动到 li(a)的后面。而后挪动指针，因为 prev 的最初一个做了挪动，所以把 prev 的指向前面的指针往前挪动一个，因为 next 的第一个 vnode 曾经找到了对应的 dom，所以 next 的后面的指针往后挪动一个。

当初比对的图变成了上面这样：

这个时候的实在 DOM：

持续比对

li(a)和 li(b)，key 不同，只 patch，不挪动。

这个时候实在 DOM：

当初最新的比对图：

持续比对

li(a)和 li(b)，key 不同，只 patch，不挪动。
li(b)和 li(a)，key 不同，只 patch，不挪动。
li(a) 和 li (a)，key 雷同，patch，把 prev 的 li(a)挪动到 next 的前面指针的元素的前面。

实在的 DOM 变成了这样：

比对的图变成这样：

持续比对：
li(b)和 li(b)的 key 雷同，patch，都是前指针雷同所以不挪动，挪动指针
这个时候前指针就在后指针前面了，这个比对就完结了。

这就实现了惯例的比对，还有不惯例的，如下图：

通过 1，2，3，4 次比对后发现，没有雷同的 key 值可能挪动。

这种状况咱们没有方法，只有用老办法，用 newStartIndex 的 key 拿去顺次到 prev 里的 vnode，直到找到雷同 key 值的老的 vnode，先 patch，而后获取实在 dom 挪动到正确的地位(放到 oldStartIndex 后面)，而后在 prevChildren 中把挪动过后的 vnode 设置为 undefined，在下次指针挪动到这里的时候间接跳过，并且 next 的 start 指针向右挪动。

function updateChildren (elm, prevChildren, nextChildren) {
  let oldStartIndex = 0;
  let oldEndIndex = prevChildren.length - 1;
  let newStartIndex = 0;
  let newEndIndex = nextChildren.length - 1;

  while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {let oldStartVnode = prevChildren[oldStartIndex];
    let oldEndVnode = prevChildren[oldEndIndex];
    let newStartVnode = nextChildren[newStartIndex];
    let newEndVnode = nextChildren[newEndIndex];

    if (oldStartVnode === undefined) {oldStartVnode = prevChildren[++oldStartIndex];
    }
    if (oldEndVnode === undefined) {oldEndVnode = prevChildren[--oldEndIndex];
    }

    if (oldStartVnode.key === newStartVnode.key) {patchVnode(newStartVnode, oldStartVnode);
      oldStartIndex++;
      newStartIndex++;
    } else if (oldEndVnode.key === newEndVnode.key) {patchVnode(newEndVnode, oldEndVnode);
      oldEndIndex--;
      newEndIndex--;
    } else if (oldStartVnode.key === newEndVnode.key) {patchVnode(newEndVnode, oldStartVnode);
      elm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
      newEndIndex--;
      oldStartIndex++;
    } else if (oldEndVnode.key === newStartVnode.key) {patchVnode(newStartVnode, oldEndVnode);
      elm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
      oldEndIndex--;
      newStartIndex++;
    } else {const idxInOld = prevChildren.findIndex(child => child.key === newStartVnode.key);
      if (idxInOld >= 0) {elm.insertBefore(prevChildren[idxInOld].elm, oldStartVnode.elm);
        prevChildren[idxInOld] = undefined;
        newStartIndex++;
      }
    }
  }
}

接下来就是新增节点：

这种排列办法，依照下面的办法，通过 1，2，3，4 比对后找不到雷同 key，而后而后用 newStartIndex 到老的 vnode 中去找，依然找不着，这个时候阐明是一个新节点，把它插入到 oldStartIndex 后面

最初是删除节点，我把他作为课后作业，同学能够本人实现最初的删除的算法。

残缺代码在 https://github.com/TingYinHelen/ tempo 的 vue 分支。

PS. 本文局部内容参考自《比对一下 react,vue2.x,vue3.x 的 diff 算法》。

本文分享自华为云社区《90 后小姐姐带你理解 Vue3.0 新个性》，原文作者：技术火炬手。

点击关注，第一工夫理解华为云陈腐技术~

关于算法:越来越受欢迎的Vue想学么90后小姐姐今儿来教你

理解 Vue3.0 先从六大个性说起

Tree Shaking

Composition

Fragment

Teleport

vue 的 diff 算法

Just My Socks（注册教程内含优惠码）

关于算法:越来越受欢迎的Vue想学么90后小姐姐今儿来教你

理解 Vue3.0 先从六大个性说起

Tree Shaking

Composition

Fragment

Teleport

vue 的 diff 算法

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）