Vue3 0系列（Vue3 0是如何變快的 ）

來說一說為什麼performance：效能比vue 2.x快1.2~2倍

這裡先提供兩個**：

2.1 diff演算法優化:

我是段落}

import  from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) 

靜態標記有哪些？

export const enum patchflags

hello

hello
hello
}}

export function render(_ctx, _cache, $props, $setup, $data, $options) ", 1 /* text */)

]))}

//前3個p不參與更新，做靜態提公升

const _hoisted_1 = /*#__pure__*/_createvnode("p", null, "hello", -1 /* hoisted */)
const _hoisted_2 = /*#__pure__*/_createvnode("p", null, "hello", -1 /* hoisted */)
const _hoisted_3 = /*#__pure__*/_createvnode("p", null, "hello", -1 /* hoisted */)
export function render(_ctx, _cache, $props, $setup, $data, $options) ", 1 /* text */)
]))}

預設情況下onclick會被視為動態繫結, 所以每次都會去追蹤它的變化

但是因為是同乙個函式，所以沒有追蹤變化, 直接快取起來復用即可

按鈕

export function render(_ctx, _cache, $props, $setup, $data, $options) , "按鈕", 8 /* props */, ["onclick"])

]))}

export function render(_ctx, _cache, $props, $setup, $data, $options) , "按鈕")

]))}

我們只需要觀察有沒有靜態標記即可

因為我們知道在vue3的diff演算法中, 只有有靜態標記的才會進行比較, 才會進行追蹤

上面的事件監聽快取後，是沒有動態標記的

2.4 ssr渲染

快速上手vue3 0

安裝最新vue腳手架 npm i vue cli g 通過腳手架建立專案，並選擇3.0 vue create vue next 執行專案 npm run serve vue2.0採用的叫做選項式api 例如我們想實現某乙個功能，關於這個功能的資料我們會定義在data中，事件函式定義在methods中...

Vue3 0學習記錄

composition api 組合api 效能提公升 viteoptions api composition api 響應式系統公升級 vue.js 3.0中使用proxy物件重寫響應式系統 proxy物件效能本身就比 defineproperty好 物件可以攔截物件的賦值 刪除等，不需要初始化遍...

vue3 0前端學習

1 響應系統公升級 vue.js 3.0 中使用proxy物件重寫響應式系統 可以監聽動態新增的屬性 可以監聽刪除的屬性 可以監聽陣列的索引和length屬性 2 編譯優化 vue.js 2.x 中，模板首先被編譯為render函式，構建過程中完成，會編譯靜態根節點和靜態子節點，當元件狀態發生變化時...