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