vue3.0學習筆記(一)

阿新 • • 發佈：2021-01-07

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

一、diff演算法優化：

vue2.x的虛擬DMO是進行全量比較。
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。