Vue3 效率提升主要表現在哪些方面？（收藏！）

vue3.0的各種表現還是非常棒的，相比vue2.0確實上了一個臺階，據說在客戶端渲染效率比vue2提升了1.3~2倍，SSR渲染效率比vue2提升了2 ~3倍。在面試的過程中可能也會被問到。

?? 靜態(tài)提升

vue中有個編譯器，在vue3的package.json文件中有個@vue/compiler-sfc，vue2中叫vue-template-compiler，這兩個就是編譯器，它會把我們的模板編譯為render函數，在vue3中編譯器是很智能的，在編譯的過程中，它可以發(fā)現哪些節(jié)點是靜態(tài)節(jié)點，什么是靜態(tài)節(jié)點？

靜態(tài)節(jié)點就是一個元素節(jié)點，而且這個節(jié)點里面沒有任何動態(tài)的內容，就是說沒有綁定任何動態(tài)的屬性，這叫靜態(tài)節(jié)點，比如：

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

上述代碼中的img就是靜態(tài)節(jié)點，它沒有綁定任何動態(tài)的內容

然而vue3的編譯器會發(fā)現靜態(tài)節(jié)點，然后將它進行提升，但是在vue2中它是不在乎是靜態(tài)節(jié)點，還是動態(tài)節(jié)點，一頓操作猛如虎，下面對比下：

//vue2 的靜態(tài)節(jié)點
render(){
    //創(chuàng)建一個虛擬節(jié)點h1，沒有任何屬性，只有內容為"法醫(yī)"，編譯后 <h1>法醫(yī)</h1>
    createVNode("h1",null,"法醫(yī)");
    //....其他代碼
}

//vue3 的靜態(tài)節(jié)點
const hoisted = createVNode("h1",null,"法醫(yī)");
function render(){
    //直接使用 hoisted就可以了
}

在vue3中，它覺得這既然是一個靜態(tài)節(jié)點，那么肯定是不會變化的，不可能說這一次是h1元素內容是法醫(yī)，下次變成h2元素內容是別的了，所以說vue3認為既然是靜態(tài)節(jié)點，那么就沒有必要在render函數中進行創(chuàng)建，因為一旦數據改變，render函數會反復運行，然后又會重新創(chuàng)建這個靜態(tài)節(jié)點，所以為了提升效率，在vue3中，它會把靜態(tài)節(jié)點進行提升，提升到render函數外面，這樣一來，這個靜態(tài)節(jié)點永遠只被創(chuàng)建一次，之后直接在render函數中使用就行了。

示例：

運行一個新創(chuàng)建的vue3項目，在控制臺可以清楚的看到，靜態(tài)節(jié)點被提升到外部了。這個就是靜態(tài)節(jié)點的提升。

其實不僅僅是靜態(tài)節(jié)點會進行提升，而且靜態(tài)屬性也是會提升的，ok，我們來看下：

示例：

這是vue3新創(chuàng)建項目中的APP.vue組件，加一條h1元素節(jié)點，要注意h1不是靜態(tài)節(jié)點，它是動態(tài)的，因為內容是動態(tài)的，只有屬性是靜態(tài)的

//APP.vue代碼
<template>
  <h1 class="active">{{name}}</h1>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="解決bug的法醫(yī)" />
</template>

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

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

效果如下：

?? 預字符串化

這一點真的是特別厲害，佩服尤大大，我們可以回憶下，在平時vue開發(fā)過程中，組件當中沒有特別多的動態(tài)元素，大多都是靜態(tài)元素。

舉個栗子??：

<div class="menu-bar-container">
    <div class="logo">
      <h1>法醫(yī)</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元素是動態(tài)元素之外，其余都是靜態(tài)節(jié)點，一般可以說是動靜比，動態(tài)內容 / 靜態(tài)內容，比例越小，靜態(tài)內容越多，比例越大，動態(tài)內容越多，vue3的編譯器它會非常智能地發(fā)現這一點，當編譯器遇到大量連續(xù)的靜態(tài)內容，會直接將它編譯為一個普通字符串節(jié)點，因為它知道這些內容永遠不會變化，都是靜態(tài)節(jié)點。

?? 注意：必須是大量連續(xù)的靜態(tài)內容才可以預字符串化哦，切記！目前是連續(xù)20個靜態(tài)節(jié)點才會預字符串化

然而在vue2中，每個元素都會變成虛擬節(jié)點，一大堆的虛擬節(jié)點??，這些全都是靜態(tài)節(jié)點，在vue3中它會智能地發(fā)現這一點

const _hoisted_1 = /*#__PURE__*/
//createStaticVNode 靜態(tài)節(jié)點的意思
_createStaticVNode("<div class=\"menu-bar-container\"><div class=\"logo\"><h1>法醫(yī)</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中創(chuàng)建一個虛擬節(jié)點button，屬性里面多了一個事件onclick，內容就是count++

在vue3中就有緩存了，它認為這里的事件處理是不會變化的，不是說這次渲染是事件函數，下次就變成別的了，于是vue3會智能地發(fā)現這一點，會做緩存處理，它首先會看一看緩存里面有沒有這個事件函數，有的話直接返回，沒有的話就直接賦值為一個count++函數，保證事件處理函數只生成一次，如下圖：

?? Block Tree

Block Tree 主要為了提高新舊兩棵樹在對比差異的時候提升效率，對比差異的過程叫diff算法，也叫patch算法。

vue2在對比新舊兩棵樹的時候，并不知道哪些節(jié)點是靜態(tài)的，哪些節(jié)點是動態(tài)的，因此只能一層一層比較，這就浪費了大部分時間在對比靜態(tài)節(jié)點上。

舉個栗子??：

<form>
  <div>
    <label>賬號：</label>
    <input v-model="user.loginId" />
  </div>
  <div>
    <label>密碼：</label>
    <input v-model="user.loginPwd" />
  </div>
</form>

vue2對比：

vue2通過一系列對比之后發(fā)現，，只有input發(fā)生了變化，也就是黃色方塊部分，藍色方塊都為靜態(tài)節(jié)點，并沒有發(fā)生變化，這些沒有發(fā)生變化的對比都是一些沒有意義的對比，浪費了時間，浪費了生命

vue3對比：

vue3依托強大的編譯器，編譯器可以對每一個節(jié)點進行標記，然后在根節(jié)點中記錄后代節(jié)點中哪些是動態(tài)節(jié)點，記錄之后，在對比的過程中它不是整棵樹進行對比，而是直接找到根節(jié)點，我們叫block節(jié)點，對比動態(tài)節(jié)點數組就可以了，這樣就會略過所有的靜態(tài)節(jié)點，也不涉及對樹的深度遍歷了，所以速度會非?？欤旍o態(tài)內容越多，效率提升就越大。

當然可能有小伙伴們會問，當數據更新后可能會多出來分支，這樣處理的話會造成樹的不穩(wěn)定，樹一旦不穩(wěn)定就會出問題了，凡是樹不穩(wěn)定的地方vue3會把它全部變成塊block，具體還是挺復雜的，我還沒研究呢，大概就是這么個意思。等我想明白了，后面再跟大家說哈??

?? PatchFlag

vue3覺得在對比每一個節(jié)點的時候還是在浪費效率，盡管說已經跳過了所有不需要比對的節(jié)點，但是它還要看看節(jié)點的元素類型、屬性以及遞歸子節(jié)點有沒有變化，在針對單個節(jié)點對比的時候進一步優(yōu)化，這依然需要依托vue3強大的編譯器，在編譯的時候，它會記錄哪個節(jié)點是動態(tài)內容，并且做上標記

舉個栗子??：

 <div class="active" title="法醫(yī)">
    {{user.name}}
  </div>

vue3會在編譯的時候，它會對節(jié)點做上標記，圖上標記為1，表示在div節(jié)點中text是動態(tài)的

舉個栗子??：

<div :class="active" title="法醫(yī)">
    {{user.name}}
  </div>

這個3表示在div節(jié)點中text和class類是動態(tài)的

最后

點個在看支持我吧，轉發(fā)就更好了