ホームページ >ウェブフロントエンド >Vue.js >なぜ vue3 は速いのでしょうか? vue3 の効率は主にどのような点で向上しますか?
なぜ vue3 は速いのですか? vue3 の効率は主にどのような点で向上しますか?次の記事では、vue2 と比較して vue3 による最適化を紹介します。
You Dada は vue3 を導入し、クライアントのレンダリング効率が vue2 より 1.3 ~ 2 倍高く、SSR レンダリング効率が 2 ~ 3 倍であると述べました。 vue2よりも高いです。
静的ノードとは何ですか?
いわゆる静的ノードは vue で書かれています template
テンプレート内の タグ とタグは v-bind
バインディング属性を使用せず、vue3 の 静的ノード# とみなされます。 ####。 (学習ビデオ共有: vuejs チュートリアル) <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>
は render 関数で static ノード
を使用します。は保存されるため、静的ノードは 1 回だけ作成されます。 // vue2 的静态节点
render(){
createVNode("h1", null , "Hello World")
}
// vue3 的静态节点
const h1 = createVNode("h1", null , "Hello World")
render(){
// 直接使用即可
}
これを証明するには、
プロジェクトをローカルに作成し、ネットワーク リクエストを確認してください
静的プロパティも改善されます
<template > <div class="container"> //container 这是一个静态属性 {{ text }} // 内容是动态的 </div> </template> <script> export default { data() { return { text: 'Hello World', } }, } </script>container
は保存するために変数も使用します
Pre-stringification
<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 では、これは文字列に直接変換され、実際の
を作成するときに、innerHTML 属性に割り当てられます。 vue2 での 再帰的作成時間を短縮します
#事前文字列化のパフォーマンス向上は、再実行時の最初の作成時の向上には及びません。 render 関数でのレンダリング この改善により、多数の仮想ノードの比較時間が短縮されました (非常に怖い)キャッシュ イベント処理関数
<template > <button @click="handleClick">点一下</button> </template> <script> export default { data() { return { } }, methods: { handleClick() { console.log('点击了') } }, } </script>handleClick
と 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))) このコードはイベント関数のキャッシュです
ブロックツリー
vue2 新旧のノード ツリーを比較すると、どのノードが静的でどのノードが動的であるかがわからないため、レイヤーを比較することしかできません。その結果、静的ノードの比較に多くの時間が無駄になりました
vue3比較方法実際には、ノードを作成するときに、ノードのタイプを記録するマークがあります。ここで、node
-1 は実際にノードのタイプをマークするため、
Block Tree内ではこれを直接使用できます。静的ノードの比較をスキップして比較時間を短縮するためにマークします。 PatchFlag
PatchFlagをさらに最適化したもので、単一ノードを比較するときに、属性、コンテンツなどを比較します。 vue2 単一ノードを比較する場合、どのノードを比較すればよいかわからないので、一度すべてを比較します。
vue3 次に、どの属性が動的であるかがわかります。各更新では、動的属性
<template > <div class="logo"> <h1>{{ text }}</h1> </div> </template> <script> export default { data() { return { text: 'Hello World', } }, } </script>
l.logo のみが比較されます。
h1 のコンテンツのみが動的であるため、マークされています標準仮想ノードを作成するとき
1 ここではコンテンツが動的であることを示すため、比較する場合は
content## のみを比較します。 # 変更されたかどうかを確認します。比較時間が大幅に短縮されます (とても怖いです)概要上記の最適化はすべて、vue3
の強力なコンパイラに依存しています。とても怖い (学習ビデオ共有:Web フロントエンド開発、プログラミング入門
)以上がなぜ vue3 は速いのでしょうか? vue3 の効率は主にどのような点で向上しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。