乐趣区

关于前端:vue3-效率提升主要表现在哪些方面

jiezi

vue3.0的各种体现还是十分棒的，相比 vue2.0 的确上了一个台阶，据说在客户端渲染效率比 vue2 晋升了 1.3~2 倍，SSR 渲染效率比 vue2 晋升了 2 ~3 倍。在面试的过程中可能也会被问到。

📌 动态晋升

vue 中有个编译器，在 vue3 的 package.json 文件中有个 @vue/compiler-sfc，vue2 中叫vue-template-compiler，这两个就是编译器，它会把咱们的模板编译为render 函数，在 vue3 中编译器是很智能的，在编译的过程中，它能够发现哪些节点是 动态节点，什么是动态节点？

动态节点就是一个元素节点，而且这个节点外面没有任何动静的内容，就是说没有绑定任何动静的属性，这叫动态节点，比方：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>

上述代码中的 img 就是动态节点，它没有绑定任何动静的内容

然而 vue3 的编译器会发现动态节点，而后将它进行晋升，然而在 vue2 中它是不在乎是动态节点，还是动静节点，一顿操作猛如虎，上面比照下：

//vue2 的动态节点
render(){
    // 创立一个虚构节点 h1，没有任何属性，只有内容为 "法医"，编译后 <h1> 法医 </h1>
    createVNode("h1",null,"法医");
    //.... 其余代码
}

//vue3 的动态节点
const hoisted = createVNode("h1",null,"法医");
function render(){// 间接应用 hoisted 就能够了}

在 vue3 中，它感觉这既然是一个动态节点，那么必定是不会变动的，不可能说这一次是 h1 元素内容是 法医 ，下次变成h2 元素内容是别的了，所以说 vue3 认为既然是动态节点，那么就没有必要在 render 函数中进行创立，因为一旦数据扭转，render 函数会重复运行，而后又会从新创立这个动态节点，所以为了晋升效率，在 vue3 中，它会把动态节点进行晋升，晋升到 render 函数里面，这样一来，这个动态节点永远只被创立一次，之后间接在 render 函数中应用就行了。

示例：

运行一个新创建的 vue3 我的项目，在控制台能够分明的看到，动态节点被晋升到内部了。这个就是动态节点的晋升。

其实不仅仅是 动态节点 会进行晋升，而且 动态属性 也是会晋升的，ok，咱们来看下：

示例：

这是 vue3 新创建我的项目中的 APP.vue 组件，加一条h1 元素节点，要留神 h1 不是动态节点，它是动静的，因为内容是动静的，只有属性是动态的

//APP.vue 代码
<template>
  <h1 class="active">{{name}}</h1>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="解决 bug 的法医" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  data(){
    return{name:"bobo"}
  },
  components: {HelloWorld}
}
</script>

成果如下：

🍒 预字符串化

这一点真的是特地厉害，拜服尤大大，咱们能够回顾下，在平时 vue 开发过程中，组件当中没有特地多的动静元素，大多都是动态元素。

举个栗子🌰：

<div class="menu-bar-container">
    <div class="logo">
      <h1> 法医 </h1>
    </div>
    <ul class="nav">
      <li><a href="">menu</a></li>
      <li><a href="">menu</a></li>
      <li><a href="">menu</a></li>
      <li><a href="">menu</a></li>
      <li><a href="">menu</a></li>
    </ul>
  </div>
  <div class="user">
    <span>{{user.name}}</span>
  </div>

在这个组件中，除了 span 元素是动静元素之外，其余都是动态节点，个别能够说是 动静比 ，动静内容 / 动态内容，比例越小，动态内容越多，比例越大，动静内容越多，vue3 的编译器它会十分智能地发现这一点， 当编译器遇到大量间断的动态内容，会间接将它编译为一个一般字符串节点，因为它晓得这些内容永远不会变动，都是动态节点。

💉 留神：必须是大量间断的动态内容才能够预字符串化哦，切记！目前是间断 20 个动态节点才会预字符串化

然而在 vue2 中，每个元素都会变成虚构节点，一大堆的虚构节点😱，这些全都是动态节点，在 vue3 中它会智能地发现这一点

const _hoisted_1 = /*#__PURE__*/
//createStaticVNode 动态节点的意思
_createStaticVNode("<div class=\"menu-bar-container\"><div class=\"logo\"><h1> 法医 </h1></div><ul class=\"nav\"><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li><li><a href=\"\">menu</a></li></ul></div>", 1)

瞅个简图，感受一下 vue3 的魅力：

🥥 缓存事件处理函数

举个栗子🌰：

  <button @click="count++">plus</button>

比照解决形式：

// vue2 解决形式
render(ctx){
    return createVNode("button",{onclick:function($event){ctx.count++;}
    })
}

//vue3 解决形式
render(ctx,_cache){
    return createVNode("button",{onclick:cache[0] || (cache[0] =>($event) =>(ctx.count++))
    })
}

在 vue2 中创立一个虚构节点 button，属性外面多了一个事件 onclick，内容就是 count++

在 vue3 中就有缓存了，它认为这里的事件处理是不会变动的，不是说这次渲染是事件函数，下次就变成别的了，于是 vue3 会智能地发现这一点，会做缓存解决，它首先会看一看缓存外面有没有这个事件函数，有的话间接返回，没有的话就间接赋值为一个 count++ 函数，保障事件处理函数只生成一次，如下图：

🌴 Block Tree

Block Tree 次要为了进步新旧两棵树在比照差别的时候晋升效率，比照差别的过程叫diff 算法，也叫patch 算法。

vue2 在比照新旧两棵树的时候，并不知道哪些节点是动态的，哪些节点是动静的，因而只能一层一层比拟，这就节约了大部分工夫在比照动态节点上。

举个栗子🌰：

<form>
  <div>
    <label> 账号：</label>
    <input v-model="user.loginId" />
  </div>
  <div>
    <label> 明码：</label>
    <input v-model="user.loginPwd" />
  </div>
</form>

vue2 比照：

vue2 通过一系列比照之后发现，，只有 input 产生了变动，也就是 黄色方块 局部，蓝色方块 都为 动态节点，并没有发生变化，这些没有发生变化的比照都是一些没有意义的比照，节约了工夫，节约了生命

vue3 比照：

vue3 依靠弱小的编译器，编译器能够对每一个节点进行标记，而后在根节点中记录后辈节点中哪些是动静节点，记录之后，在比照的过程中它不是整棵树进行比照，而是间接找到根节点，咱们叫block 节点，比照动静节点数组就能够了，这样就会略过所有的动态节点，也不波及对树的深度遍历了，所以速度会十分快，当动态内容越多，效率晋升就越大。

当然可能有小伙伴们会问，当数据更新后可能会多进去分支，这样解决的话会造成树的不稳固，树一旦不稳固就会出问题了，但凡树不稳固的中央 vue3 会把它全副变成 块 block，具体还是挺简单的，我还没钻研呢，大略就是这么个意思。等我想明确了，前面再跟大家说哈😅

🍅 PatchFlag

vue3 感觉在比照每一个节点的时候还是在节约效率，只管说曾经跳过了所有不须要比对的节点，然而它还要看看节点的元素类型、属性以及递归子节点有没有变动，在针对单个节点比照的时候进一步优化，这仍然须要依靠 vue3 弱小的编译器，在编译的时候，它会记录哪个节点是动静内容，并且做上标记

举个栗子🌰：

 <div class="active" title="法医">
    {{user.name}}
  </div>

vue3 会在编译的时候，它会对节点做上标记，图上标记为 1，示意在div 节点 中text是 动静 的

举个栗子🌰：

<div :class="active" title="法医">
    {{user.name}}
  </div>

这个 3 示意在 div 节点 中text和 class 类 是动静 的

😊 好了，以上就是我的分享，心愿能对大家有所帮忙，欢送大家在评论区探讨鸭～

心愿小伙伴们点赞 👍 反对一下哦～ 😘，我会更有能源的 🤞，晚安！

退出移动版