來說一說為什麼performance:效能比vue 2.x快1.2~2倍
這裡先提供兩個**:
2.1 diff演算法優化:
例子:也就是說,vue3在渲染的時候,給會改變的元素新增了靜態標記我是段落}
我們可以看到由於第二個p標籤中是可變的動態文字,所以加上了靜態標記1import from "vue"
export function render(_ctx, _cache, $props, $setup, $data, $options)
靜態標記有哪些?
export const enum patchflags
2.2 hoiststatic 靜態提公升例子:
靜態提公升前:hello
hello
hello
}}
靜態提公升後:export function render(_ctx, _cache, $props, $setup, $data, $options) ", 1 /* text */)
]))}
2.3 cachehandlers 事件偵聽器快取//前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渲染
參考:b站李南江快速上手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函式,構建過程中完成,會編譯靜態根節點和靜態子節點,當元件狀態發生變化時...