快捷導(dǎo)航

Vue3為什么這么快

更新時(shí)間：2020年09月23日 10:51:37 作者：一條小咸咸魚

這篇文章主要介紹了Vue3為什么這么快,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

總所周知，程序員追求的就是一個(gè)字：快?。ó?dāng)然不是什么都追求快的，有些事情快起來是不行滴）

昨天Vue3.0正式發(fā)布了，激動(dòng)的心，顫抖的手，摸了摸我的頭發(fā)，嗯~還好。

據(jù)說Vue3.0相比Vue2.x在性能上提升了1.2~2倍，為啥他就這么快呢？

vue3.0做了以下事情

diff算法優(yōu)化
靜態(tài)提升（hoistStatic）
事件偵聽器緩存（cacheHandlers）
SSR優(yōu)化（看心情更新）

diff算法優(yōu)化

Vue2.x的diff算法

vue2.x的diff算法叫做全量比較，顧名思義，就是當(dāng)數(shù)據(jù)改變的時(shí)候，會(huì)從頭到尾的進(jìn)行vDom對(duì)比，即使有些內(nèi)容是永恒固定不變的。

Vue3.0的diff算法

vue3.0的diff算法有個(gè)叫靜態(tài)標(biāo)記（PatchFlag）的小玩意，啥是靜態(tài)標(biāo)記呢？
簡(jiǎn)單點(diǎn)說，就是如果你的內(nèi)容會(huì)變，我會(huì)給你一個(gè)flag，下次數(shù)據(jù)更新的時(shí)候我直接來對(duì)比你，我就不對(duì)比那些沒有標(biāo)記的了

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 */)
                        //上面這個(gè)1就是靜態(tài)標(biāo)記
 ]))
}

那么肯定有人又會(huì)問了，為啥是個(gè)1呢？

TEXT = 1 // 動(dòng)態(tài)文本節(jié)點(diǎn)
CLASS=1<<1,1 // 2//動(dòng)態(tài)class
STYLE=1<<2，// 4 //動(dòng)態(tài)style
PROPS=1<<3,// 8 //動(dòng)態(tài)屬性，但不包含類名和樣式
FULLPR0PS=1<<4,// 16 //具有動(dòng)態(tài)key屬性，當(dāng)key改變時(shí)，需要進(jìn)行完整的diff比較。
HYDRATE_ EVENTS = 1 << 5，// 32 //帶有監(jiān)聽事件的節(jié)點(diǎn)
STABLE FRAGMENT = 1 << 6, // 64 //一個(gè)不會(huì)改變子節(jié)點(diǎn)順序的fragment
KEYED_ FRAGMENT = 1 << 7, // 128 //帶有key屬性的fragment 或部分子字節(jié)有key
UNKEYED FRAGMENT = 1<< 8, // 256 //子節(jié)點(diǎn)沒有key 的fragment
NEED PATCH = 1 << 9, // 512 //一個(gè)節(jié)點(diǎn)只會(huì)進(jìn)行非props比較
DYNAMIC_SLOTS = 1 << 10 // 1024 // 動(dòng)態(tài)slot
HOISTED = -1 // 靜態(tài)節(jié)點(diǎn)
// 指示在diff算法中退出優(yōu)化模式
BALL = -2

靜態(tài)提升（hoistStatic）

Vue2.x中無論元素是否參與更新，每次都會(huì)重新創(chuàng)建然后渲染
Vue3.0中對(duì)不參與更新的元素，會(huì)做靜態(tài)提升，只會(huì)被創(chuàng)建一次，在渲染時(shí)直接復(fù)用即可
還是這段熟悉的代碼，開啟靜態(tài)提升前

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 */)
 ]))
}

開啟靜態(tài)提升后編譯結(jié)果

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 */)
 ]))
}

可以看到開啟了靜態(tài)提升后，直接將那兩個(gè)內(nèi)容為helloworld的p標(biāo)簽聲明在外面了，直接就拿來用了，這么搞的話那肯定會(huì)快啊

事件偵聽器緩存

默認(rèn)情況下onClick會(huì)被視為動(dòng)態(tài)綁定，所以每次都會(huì)去追蹤它的變化
但是因?yàn)槭峭粋€(gè)函數(shù)，所以沒有追蹤變化，直接緩存起來復(fù)用即可
dom結(jié)構(gòu)

<div>
 <button @click = 'onClick'>點(diǎn)我</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 }, "點(diǎn)我", 8 /* PROPS */, ["onClick"])
                       // PROPS=1<<3,// 8 //動(dòng)態(tài)屬性，但不包含類名和樣式
 ]))
})

這里有一個(gè)8，表示著這個(gè)節(jié)點(diǎn)有了靜態(tài)標(biāo)記，有靜態(tài)標(biāo)記就會(huì)進(jìn)行diff算法對(duì)比差異，所以會(huì)浪費(fèi)時(shí)間

開啟事件偵聽器緩存之后：

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)))
  }, "點(diǎn)我")
 ]))
}

可以發(fā)現(xiàn)，開啟事件偵聽器緩存后，沒有靜態(tài)標(biāo)記了，這就快了好多嘛

到此這篇關(guān)于Vue3為什么這么快的文章就介紹到這了,更多相關(guān)Vue3 快內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: