なぜ 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="/static/imghw/default1.png"  data-src="/_assets/logo.102c1acc.jpg"  class="lazy"   alt="logo"> // 静态节点 没有绑定任何属性
  <h1 id="Hello-nbsp-World">Hello World</h1> // 静态节点 没有绑定任何属性
  <h1 id="nbsp-text-nbsp">{{ text }}</h1>
</template>
<script>
export default {
  data() {
    return {
      text: &#39;Hello World&#39;,
    }
  },
}
</script>

vue3

は render 関数で static ノードを使用します。は保存されるため、静的ノードは 1 回だけ作成されます。

// 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: &#39;Hello World&#39;,
    }
  },
}
</script>

container

は保存するために変数も使用します

Pre-stringification

実際の開発では、 # 大規模な##template

の一部は実際には静的ノードです

<template >
  <div class="container">
    <div class="logo">
      <h1 id="logo">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: &#39;张三&#39;
      }
    }
  },
}
</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(&#39;点击了&#39;)
    }
  },
}
</script>

handleClick

event,compare

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))) このコードはイベント関数のキャッシュです

ブロックツリー

vue3

仮想ノード ツリーの最適化も行われています

vue2 新旧のノード ツリーを比較すると、どのノードが静的でどのノードが動的であるかがわからないため、レイヤーを比較することしかできません。その結果、静的ノードの比較に多くの時間が無駄になりました

vue3比較方法実際には、ノードを作成するときに、ノードのタイプを記録するマークがあります。ここで、node

-1 は実際にノードのタイプをマークするため、

Block Tree

内ではこれを直接使用できます。静的ノードの比較をスキップして比較時間を短縮するためにマークします。 PatchFlag

PatchFlag

は、

Block Tree

をさらに最適化したもので、単一ノードを比較するときに、属性、コンテンツなどを比較します。 vue2 単一ノードを比較する場合、どのノードを比較すればよいかわからないので、一度すべてを比較します。

vue3 次に、どの属性が動的であるかがわかります。各更新では、動的属性

<template >
  <div class="logo">
    <h1 id="nbsp-text-nbsp">{{ text }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: &#39;Hello World&#39;,
    }
  },
}
</script>

l.logo のみが比較されます。

h1

のコンテンツのみが動的であるため、マークされています標準仮想ノードを作成するとき

1 ここではコンテンツが動的であることを示すため、比較する場合は

content## のみを比較します。 # 変更されたかどうかを確認します。比較時間が大幅に短縮されます (とても怖いです)

概要上記の最適化はすべて、vue3

の強力なコンパイラに依存しています。とても怖い

(学習ビデオ共有:

Web フロントエンド開発、プログラミング入門

)

以上がなぜ vue3 は速いのでしょうか? vue3 の効率は主にどのような点で向上しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。