溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關Vue3速度快的原因，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
昨天Vue3.0正式發布了，激動的心，顫抖的手，摸了摸我的頭發，嗯~還好。
據說Vue3.0相比Vue2.x在性能上提升了1.2~2倍，為啥他就這么快呢？
vue3.0做了以下事情
diff算法優化
Vue2.x的diff算法
vue2.x的diff算法叫做全量比較，顧名思義，就是當數據改變的時候，會從頭到尾的進行vDom對比，即使有些內容是永恒固定不變的。
Vue3.0的diff算法
vue3.0的diff算法有個叫靜態標記（PatchFlag）的小玩意，啥是靜態標記呢？
簡單點說，就是如果你的內容會變，我會給你一個flag，下次數據更新的時候我直接來對比你，我就不對比那些沒有標記的了
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("p", null, "'HelloWorld'"),
_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
//上面這個1就是靜態標記
]))
}那么肯定有人又會問了，為啥是個1呢？
TEXT = 1 // 動態文本節點 CLASS=1<<1,1 // 2//動態class STYLE=1<<2，// 4 //動態style PROPS=1<<3,// 8 //動態屬性，但不包含類名和樣式 FULLPR0PS=1<<4,// 16 //具有動態key屬性，當key改變時，需要進行完整的diff比較。 HYDRATE_ EVENTS = 1 << 5，// 32 //帶有監聽事件的節點 STABLE FRAGMENT = 1 << 6, // 64 //一個不會改變子節點順序的fragment KEYED_ FRAGMENT = 1 << 7, // 128 //帶有key屬性的fragment 或部分子字節有key UNKEYED FRAGMENT = 1<< 8, // 256 //子節點沒有key 的fragment NEED PATCH = 1 << 9, // 512 //一個節點只會進行非props比較 DYNAMIC_SLOTS = 1 << 10 // 1024 // 動態slot HOISTED = -1 // 靜態節點 // 指示在diff算法中退出優化模式 BALL = -2
靜態提升（hoistStatic）
Vue2.x中無論元素是否參與更新，每次都會重新創建然后渲染
Vue3.0中對不參與更新的元素，會做靜態提升，只會被創建一次，在渲染時直接復用即可
還是這段熟悉的代碼，開啟靜態提升前
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("p", null, "'HelloWorld'"),
_createVNode("p", null, "'HelloWorld'"),
_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
]))
}開啟靜態提升后編譯結果
const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode("p", null, "'HelloWorld'", -1 /* HOISTED */)
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_hoisted_1,
_hoisted_2,
_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
]))
}可以看到開啟了靜態提升后，直接將那兩個內容為helloworld的p標簽聲明在外面了，直接就拿來用了，這么搞的話那肯定會快啊
事件偵聽器緩存
默認情況下onClick會被視為動態綁定，所以每次都會去追蹤它的變化
但是因為是同一個函數，所以沒有追蹤變化，直接緩存起來復用即可
dom結構
<div> <button @click = 'onClick'>點我</button> </div>
開啟事件偵聽器緩存之前：
export const render = /*#__PURE__*/_withId(function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("button", { onClick: _ctx.onClick }, "點我", 8 /* PROPS */, ["onClick"])
// PROPS=1<<3,// 8 //動態屬性，但不包含類名和樣式
]))
})這里有一個8，表示著這個節點有了靜態標記，有靜態標記就會進行diff算法對比差異，所以會浪費時間
開啟事件偵聽器緩存之后：
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("button", {
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.onClick(...args)))
}, "點我")
]))
}以上就是Vue3速度快的原因，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
