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類是動態的

???? 好了， 以上就是我的分享，希望能對大家有所幫助，歡迎大家在評論區討論鴨～

1. JavaScript 重溫系列（22篇全）

2. ECMAScript 重溫系列（10篇全）

3. JavaScript設計模式 重溫系列（9篇全）

4.?正則 / 框架 / 算法等 重溫系列（16篇全）

5.?Webpack4 入門（上）||?Webpack4 入門（下）

6.?MobX 入門（上）?||??MobX 入門（下）

7. 120+篇原創系列匯總

回復“加群”與大佬們一起交流學習~

點擊“閱讀原文”查看 120+ 篇原創文章

總結

以上是生活随笔為你收集整理的【Vuejs】1017- Vue3 效率提升主要表现在哪些方面？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。