vue3.0的優化(一)

vue3性能優於vue2.x，主要原因有以下四點：

一、diff算法優化：

• vue2.x的虛擬DOM是進行全量比較。
• vue3新增了靜態標記（PatchFlag）。

在於上次虛擬節點進行比較的時候，只比較帶有靜態標記的節點，減少了比較的次數。

 

 

 

使用vue3創建工具查看一下創建結構

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("p", null, "我是段落"),
    _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

 

可以看到對於需要改變的內容的地方添加了一個1，這個1就是靜態標記，每次內容更新也只會比較帶有靜態標記的地方。

 

二、靜態提升

• vue2.x無論元素是否參與更新，每次都會重新創新，然后渲染
• vue3中對於不參與更新的元素會做靜態提升，只會創建一次，在渲染的時候復用即可

<div>
  <p>Hello World！</p>
  <p>{{msg}}</p>  
</div>

以上節點

使用靜態提升之前：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("p", null, "Hello World！"),
    _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

使用靜態提升之后：

const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "Hello World！", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _hoisted_1,
    _createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
  ]))
}

可以看到使用靜態提升之前的代碼，是每次渲染的時候都會去重新創建；使用靜態之后的代碼，只有第一次創建，然后直接復用。把不需要參與更新的元素放在外面只創建一次。

 

三、事件監聽緩存

默認情況下，會為事件添加一個靜態標記，所以每次都會去監聽事件的變化，但是因為是同一個函數，所以沒有必要去監聽變化，直接緩存復用即可

<div>
  <button @click="click">點擊事件</button>
</div>

以上節點

使用事件監聽緩存之前：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("button", { onClick: _ctx.click }, "點擊事件", 8 /* PROPS */, ["onClick"])
  ]))
}

8就是靜態標記，因此每次更新DOM，都會追蹤這個方法進行對比。

使用事件監聽緩存之后：

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("button", {
      onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.click && _ctx.click(...args)))
    }, "點擊事件")
  ]))
}

使用事件監聽緩存之后的代碼靜態標記就已經被去掉了，這樣就不會去進行對比。

 

四、SSR渲染

先使用新的工具創建一個vue3的項目，也就是vite。

• 安裝Vite------npm i -g create-vite-app
• 利用Vite創建vue3項目------ceate-vite-app projectName

Vite是Vue作者開發的一款試圖取代webpack的工具

實現原理是利用es6的import發送請求去加載文件的特性，攔截這些請求，做一些預編譯，省去webpack冗長的打包時間。

SSR渲染利於搜索引擎，解決白屏問題，因為正常情況下在index.html文件中只有一個簡單的標簽，沒有內容，不利於爬蟲搜索