vue3為什么快？vue3的效率提升主要在哪方面？下面本篇文章就來給大家介紹一下vue3相對于vue2 做了那些優(yōu)化，希望對大家有所幫助！
尤大大在介紹vue3說客戶端的渲染效率比vue2提升了1.3-2倍, SSR渲染效率比 vue2 提升了2-3倍。
對靜態(tài)節(jié)點(diǎn)的提升
什么是靜態(tài)節(jié)點(diǎn)?
所謂的靜態(tài)節(jié)點(diǎn)就是在 vue 中的寫在 template 模板中的 標(biāo)簽 并且該標(biāo)簽沒有使用 v-bind 綁定屬性, 在 vue3 就認(rèn)為是 靜態(tài)節(jié)點(diǎn)。
<template >
<img src="/_assets/logo.102c1acc.jpg" alt="logo"> // 靜態(tài)節(jié)點(diǎn) 沒有綁定任何屬性
<h1>Hello World</h1> // 靜態(tài)節(jié)點(diǎn) 沒有綁定任何屬性
<h1>{{ text }}</h1>
</template>
<script>
export default {
data() {
return {
text: 'Hello World',
}
},
}
</script>vue3 就會(huì)在 render 函數(shù)中將 靜態(tài)節(jié)點(diǎn) 用變量保存下來, 所以該靜態(tài)節(jié)點(diǎn)只會(huì)創(chuàng)建一次。
// vue2 的靜態(tài)節(jié)點(diǎn)
render(){
createVNode("h1", null , "Hello World")
}
// vue3 的靜態(tài)節(jié)點(diǎn)
const h1 = createVNode("h1", null , "Hello World")
render(){
// 直接使用即可
}為了證明這一點(diǎn), 本地創(chuàng)建一個(gè) vue3 的項(xiàng)目, 看網(wǎng)絡(luò)請求
靜態(tài)屬性也會(huì)被提升
<template >
<div class="container"> //container 這是一個(gè)靜態(tài)屬性
{{ text }} // 內(nèi)容是動(dòng)態(tài)的
</div>
</template>
<script>
export default {
data() {
return {
text: 'Hello World',
}
},
}
</script>container 也會(huì)使用變量保存
預(yù)字符串化
在實(shí)際的開發(fā)中, template 中實(shí)際很大一部分都是靜態(tài)節(jié)點(diǎn)
<template >
<div class="container">
<div class="logo">
<h1>logo</h1>
</div>
<ul class="nav">
<li><a href="">菜單</a></li>
<li><a href="">菜單</a></li>
<li><a href="">菜單</a></li>
<li><a href="">菜單</a></li>
</ul>
<div class="user">
{{ user.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: {
name: '張三'
}
}
},
}
</script>vue3 的編譯器遇到大量的連續(xù)的靜態(tài)節(jié)點(diǎn), 會(huì)直接將其編譯為一個(gè)普通的字符創(chuàng)節(jié)點(diǎn)
.logo .nav 整個(gè) div 都是靜態(tài)節(jié)點(diǎn), 如果按照 vue2 的處理方式會(huì)進(jìn)行 遞歸創(chuàng)建處理
而在 vue3 直接轉(zhuǎn)化為一個(gè)字符串, 然后在創(chuàng)建真實(shí) dom 是賦值給 innerHTML 屬性, 就減少了 vue2 中的遞歸創(chuàng)建時(shí)間
預(yù)字符串化的性能提升不緊緊在第一次創(chuàng)建時(shí)的提升, 當(dāng)在 render 函數(shù)重新渲染時(shí)的提升減少了大量的虛擬節(jié)點(diǎn)的對比時(shí)間(非常恐怖)
緩存事件處理函數(shù)
<template >
<button @click="handleClick">點(diǎn)一下</button>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
handleClick() {
console.log('點(diǎn)擊了')
}
},
}
</script>handleClick事件，對比一下 vue2 和 vue3 的處理方式
// vue2
render(ctx){
return createVNode("button",{
onclick: function ($event) {
console.log('點(diǎn)擊了')
}
})
}
// vue3
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(),
_createBlock("button", {
onClick: _cache[1] || (_cache[1] = (...args)=>($options.handleClick && $options.handleClick(...args)))
}, "點(diǎn)一下"))
}_cache[1] || (_cache[1] = (...args)=>($options.handleClick && $options.handleClick(...args))) 這段代碼就是對事件函數(shù)的緩存
Block Tree
vue3 在對虛擬節(jié)點(diǎn)樹對比時(shí)也做了優(yōu)化
vue2 在對比新舊節(jié)點(diǎn)樹時(shí), 并不知道那些節(jié)點(diǎn)是靜態(tài)的, 那些節(jié)點(diǎn)是動(dòng)態(tài)的, 因此只能一層一層的比較，這就導(dǎo)致浪費(fèi)了大量的時(shí)間在靜態(tài)節(jié)點(diǎn)對比上
vue3 是如何進(jìn)行對比的, 其實(shí)在當(dāng)在創(chuàng)建節(jié)點(diǎn)時(shí)有有一個(gè)標(biāo)記記錄了該節(jié)點(diǎn)的類型
這里的 -1 其實(shí)就是標(biāo)記該節(jié)點(diǎn)的類型, 所以當(dāng)在 Block Tree 時(shí), 根據(jù)該標(biāo)記就能直接跳過對靜態(tài)節(jié)點(diǎn)的對比, 從而達(dá)到減少對比的時(shí)間。
PatchFlag
PatchFlag 是對 Block Tree 進(jìn)一步優(yōu)化, 在對比單個(gè)節(jié)點(diǎn)的時(shí), 會(huì)對比屬性, 內(nèi)容等等。
vue2 在單個(gè)節(jié)點(diǎn)對比時(shí)不知道那些是要對比的所以全部對比一次
vue3 就知道那些屬性是動(dòng)態(tài)的, 每次更新只對比動(dòng)態(tài)的屬性
<template >
<div class="logo">
<h1>{{ text }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
text: 'Hello World',
}
},
}
</script>l.logo中只有 h1 的內(nèi)容是動(dòng)態(tài)的所以在創(chuàng)建標(biāo)虛擬節(jié)點(diǎn)時(shí)就是做標(biāo)記
這里的1就是標(biāo)記該內(nèi)容是動(dòng)態(tài)的, 所以在進(jìn)行對比時(shí)就只對比 內(nèi)容 是否變化, 就極大的縮短了對比時(shí)間(恐怖如斯)
總結(jié)
上面的優(yōu)化都依托于 vue3強(qiáng)大的編譯器 恐怖如斯
