vue3とvue2の利点の比較

抽象的な：

Vue3の新バージョンのコンセプトは、Vue 2 がリリースされてからすでに 2 年半が経過していた 2018 年末に形成されました。一般的なソフトウェアのライフサイクルと比較すると、それほど長くはないようです。Vue3は2020年に正式リリースされ、ソースコードとAPIに大きな変更が加えられました。パフォーマンスが大幅に向上し、Vue2.xよりも1.2〜2倍高速になりました。

Vue3 の新バージョンのコンセプトは、Vue 2 がリリースされてからすでに 2 年半が経過していた 2018 年末に形成されました。一般的なソフトウェアのライフサイクルと比較すると、それほど長くはないようです。Vue3は2020年に正式リリースされ、ソースコードとAPIに大きな変更が加えられました。パフォーマンスが大幅に向上し、Vue2.xよりも1.2〜2倍高速になりました。

その中でも特に重要な利点は次のとおりです。

diff アルゴリズムの最適化: hoistStatic静的改善、 cacheHandlersイベント リスナー キャッシュ、 ssrレンダリング、より優れた Ts サポート、 Compostion API : 組み合わせ API/インジェクション API、より高度なコンポーネント、カスタム レンダリング API、オンデマンド コンパイル、vue2.x よりも小さいサイズ、マルチルート ノード コンポーネントのサポートなど。

vue3 の利点について詳しく説明しましょう。

利点1: diffアルゴリズムの最適化

Vue2 の仮想 DOM は完全な比較です (ハードコードされているか動的であるかにかかわらず、各ノードはレイヤーごとに比較されるため、静的ノードの比較にほとんどのイベントが無駄になります)

Vue3 では静的フラグ ( patchflag ) が追加されました。最後の仮想ノードと比較する場合、 patch flagを持つノード (動的データが配置されているノード) のみが比較されます。フラグ情報を使用して、比較する現在のノードの具体的な内容を知ることができます。

たとえば、次のテンプレートには 3 つの段落を持つ div が含まれています。最初の 2 つの段落は静的で固定されていますが、3 番目の段落の内容はmsg属性にバインドされています。msg が変更されると、Vue は新しい仮想 DOM を生成し、それを古いものと比較します。

<div>
 <p>クラウドレジデンス共創</p>
 <p>vue3 を評価する方法</p>
 <p>{{メッセージ}}</p>
</div>

ビューが更新されると、動的ノードのみが比較されるため、リソースの消費が削減されます。 Patchflagは列挙体です。値が 1 の場合、この要素のテキストは動的にバインドされ、値が 2 の場合、要素のclass動的にバインドされます。

利点2: ホイスト静的静的リフティング

Vue2 は、要素が更新に参加しているかどうかに関係なく、毎回再作成してレンダリングします。更新に参加しない要素については、Vue3 は静的プロモーションを実行します。これらは一度だけ作成され、レンダリング中に直接再利用できます。たとえば、 Vue 3 Template Explorerを使用して、直感的に理解してみましょう。

<div>
    <div>共創 1</div>
    <div>共創 2</div>
    <div>{{名前}}</div>
</div>

静的リフティングの前

エクスポート関数render(...) {
    戻る （
        _openBlock(),
        _createBlock('div', null, [
            _createVNode('div', null, '共同作成1'),
            _createVNode('div', null, '共創2'),
            _createVNode(
                'div',
                ヌル、
                _toDisplayString(_ctx.name)、
                1 /* テキスト */
            ）、
        ])
    ）
}

静的リフティング後

const _hoisted_1 = /*#__PURE__*/ _createVNode(
    'div',
    ヌル、
    「共創1」、
    -1 /* 持ち上げられました */
）
const _hoisted_2 = /*#__PURE__*/ _createVNode(
    'div',
    ヌル、
    「共創2」
    -1 /* 持ち上げられました */
）

エクスポート関数render(...) {
    戻る （
        _openBlock(),
        _createBlock('div', null, [
            _hoisted_1、
            _hoisted_2、
            _createVNode(
                'div',
                ヌル、
                _toDisplayString(_ctx.name)、
                1 /* テキスト */
            ）、
        ])
    ）
}

上記のコードから、_hoisted_1 メソッドと_hoisted_2メソッドがレンダリング関数render外部で昇格されている，_hoisted_1 。これを静的昇格と呼びます。静的プロモーションにより、レンダリングするたびにこれらのオブジェクトを再作成する必要がなくなり、レンダリング効率が大幅に向上します。

利点3: cacheHandlers イベントリスナーキャッシュ

vue2.x では、バインドされたイベントがトリガーされるたびに新しいfunctionを再生成して更新する必要があります。cacheHandlers cacheHandlers 、Vue3 で提供されるイベント キャッシュ オブジェクトです。cacheHandlers cacheHandlersオンにすると、インライン関数が自動的に生成され、同時に静的ノードも生成されます。イベントが再度トリガーされたときは、再度更新せずにキャッシュから呼び出すだけで済みます。

デフォルトでは、 onClickは動的バインディングと見なされるため、その変更は毎回追跡されます。ただし、同じ関数の変更を追跡する必要はなく、キャッシュして再利用することができます。

たとえば、 Vue 3 Template Explorerを使用して、イベント リスナー キャッシュの効果を確認してみましょう。

<div>
    <div @click="todo">何か楽しいことをする</div>
</div>

コンパイル後、このhtmlセクションは次の構造になります (イベント監視キャッシュは有効になっていません)。

エクスポート関数render(...) {
    戻り値 (_openBlock(),_createBlock('div', null, [
            _createVNode('div',{ onClick: _ctx.todo}, '何か面白いことをする', 8 /* PROPS */,
                ['onClick'])、
        ])
    ）
}

イベント リスナーのキャッシュをオンにすると、次のようになります。

エクスポート関数render(...) {
    戻り値 (_openBlock(),_createBlock('div', null, [
            _createVNode('div',{
                    onClick: //監視を有効にした後_cache[1] || (_cache[1] = (...args) =>_ctx.todo(...args)),
                },'何か面白いことをする'),
        ])
    ）
}

イベントリスニングキャッシュをオンにする前と後のコードを比較することができます。変換後のコードは理解できないかもしれませんが、それは問題ではありません。静的タグがあるかどうかを観察するだけです。Vue3 の diff アルゴリズムでは、静的タグがあるものだけが比較され、追跡されます。

利点4: SSRレンダリング

Vue2 にも SSR レンダリングがありますが、Vue3 の SSR レンダリングは Vue2 に比べてパフォーマンスが向上しています。

静的コンテンツが大量にある場合、このコンテンツは純粋な文字列としてbufferにプッシュされます。動的バインディングがある場合でも、テンプレート補間によってこっそりと挿入されます。これは、仮想 dmo によるレンダリングよりもはるかに高速になります。

静的コンテンツが十分に大きい場合、 _createStaticVNodeメソッドを使用してクライアント上にstatic nodeが生成されます。これらの静的ノードは直接innerHtmlになるため、オブジェクトを作成してからオブジェクトに従ってレンダリングする必要はありません。

利点5: より優れたTsサポート

Vue2 はOption APIスタイルのため、 ts vue2使用には適していません。 options単純なオブジェクトですが、 ts は型システムとオブジェクト指向の構文です。この二つはちょっと相性が悪いです。

vue2とtsを組み合わせる具体的な実践では、 vue-class-componentを使用してvueコンポーネントを強化し、ScriptでTypeScriptデコレータをサポートし、vue-property-decoratorを使用してVueの機能を組み合わせたデコレータをさらに追加します。結局のところ、tsとjsのコンポーネントの記述方法はかなり異なります。

vue3 では、 defineComponent関数が調整され、コンポーネントが ts でのパラメータ型推論をより有効に活用できるようになります。 Composition APIコーディング スタイルでは、より代表的な API は ref と reactive であり、これらも型宣言を非常に適切にサポートします。

'vue' から {defineComponent, ref} をインポートします。
const コンポーネント = defineComponent({
    小道具: {
        成功: { 型: 文字列 },
        学生：
          タイプ: PropType<Student> としてのオブジェクト、
          必須: true
       }
    },
    設定（） {
      定数年 = ref(2020)
      const month = ref<文字列 | 数値>('9')
      month.value = 9 // OK
     定数結果 = year.value.split('') 
 }

利点6: コンポジションAPI: コンビネーションAPI/インジェクションAPI

従来の Web ページはhtml/css/javascript (構造/スタイル/ロジック) によって分離されています。 Vue はコンポーネント化を使用して、密接に関連する構造/スタイル/ロジックをまとめ、コードのメンテナンスに役立ちます。 compostionapiさらに一歩進んで JS (ロジック) 部分に焦点を当て、論理的に関連するコードをまとめることで、コードのメンテナンス性を高めます。

Option APIスタイル ( data/methods/mounted ) は、vue2 コンポーネント内のコードを整理するために使用され、ロジックを分散させます。たとえば、カウンター機能を完成させるには、 data で変数を宣言し、 methodsで応答関数を定義し、 mountedで変数を初期化する必要があります。多くの機能と大量のコードを持つコンポーネントでこのような機能を維持したい場合は、 data/methods/mounted内の対応する位置に繰り返し切り替えてコードを変更する必要があります。

vue3 では、 setup関数を使用します。以下のように、count に関するロジックは counter.js ファイルに配置され、todo に関するロジックは todos.js に配置されます。

'./counter' から useCounter をインポートします。
'./todos' から useTodo をインポートします

設定（）{
{ val, todos, addTodo } = useTodo() とします
let { count, add } = useCounter() 
戻る {
val、todos、addTodo、
数える、追加する、
}

利点7: より高度なコンポーネント

Vue2 では、このような記述は許可されていません。コンポーネントにはルート ノードが必要です。このように記述すると、Vue が仮想Fragmentノードを作成します。

<テンプレート>
<div>Huawei クラウド エキスパート</div>
<div>フルスタックブロガー</div>
</テンプレート>

Suspended-componentが完全にレンダリングされる前に、代替コンテンツが表示されます。非同期コンポーネントの場合、 Suspenseコンポーネントがダウンロードされるまで待機するか、セットアップ関数でいくつかの非同期操作を実行できます。

利点8: カスタムレンダリングAPI

vue2.x プロジェクトのアーキテクチャは、weex (モバイル デバイス用のクロスプラットフォーム ソリューション) やmyvue (ミニ プログラムで使用) などのさまざまなプラットフォームへのレンダリングにはあまり適していません。Vue3.0 では、この問題を解決するためにカスタム レンダリング API が導入されました。次に、vue2 と vue3 のエントリの書き方の違いを見てみましょう。

vue2:

'vue' から Vue をインポートします
'./App.vue' からアプリをインポートします。
新しい Vue({ => h(App)}).$mount('#app')

vue3:

'vue' からの const { createApp }
「./src/App」からアプリをインポートします。
createApp(App).mount(('#app')

vue によって公式に実装されたcreateApp templateマッピング用の HTML コードを生成しますが、HTML ではなく、 canvasまたはその他の非 HTML コードにレンダリングする場合は、 Custom Renderer APIを使用して独自のレンダリング生成関数を定義する必要があります。

「./runtime-render」から {createApp} をインポートします。
import App from "./src/App"; // ルートコンポーネント createApp(App).mount('#app');

weexやmyvue問題は完全に解決されます。 createAppをオーバーライドするだけです。

利点 9: オンデマンドでコンパイル、vue2.x よりもサイズが小さい

フレームのサイズもパフォーマンスに影響します。これは Web アプリケーションに特有の懸念事項です。リソースはオンザフライでダウンロードする必要があるため、ブラウザーが必要な JavaScript を解析するまでアプリケーションは対話型になりません。これは特にシングルページ アプリケーションの場合に当てはまります。 Vue は常に比較的軽量です (Vue 2 のランタイム サイズは圧縮後 23 KB です)。

Vue 3 では、ほとんどのグローバル API と内部ヘルパーを ES モジュール エクスポートに移動することでこれを実現しました。これにより、最新のバンドラーはモジュールの依存関係を静的に分析し、未使用のエクスポート関連コードを削除できるようになります。テンプレート コンパイラは、使いやすいTree-shakingコードも生成し、関数が実際にテンプレートで使用されるときに関数ヘルパーをインポートします。

フレームワークの一部は、あらゆる種類のアプリケーションに不可欠であるためTree-shakingれることはありません。これらの重要な部品の測定値をベースライン寸法と呼びます。多くの新機能が追加されたにもかかわらず、Vue 3 のベースライン サイズは gzip 圧縮で約 10 KB で、Vue 2 の半分以下です。

利点10: 複数のルートノードコンポーネントをサポートする

Vue3 では、テンプレートは複数のルートノードに制限されなくなりました。 (複数のルートノードでのAttribute継承) attributeどこに分散させるかを明示的に定義する必要があります。そうでない場合、コンソールに警告プロンプトが表示されます。

Vue 3 では、コンポーネントはマルチルート コンポーネント (フラグメントとも呼ばれます) を正式にサポートするようになりました。

2.x では、マルチルート コンポーネントはサポートされておらず、ユーザーが誤ってマルチルート コンポーネントを作成すると警告が出されました。このバグを修正するために、多数のコンポーネントが 1 つにラップされました。次のように

<テンプレート>
  <div>
    <ヘッダー>...</ヘッダー>
    <メイン>...</メイン>
    <フッター>...</フッター>
  </div>
</テンプレート>

3.x では、コンポーネントに複数のルート ノードを設定できるようになりました。ただし、この場合、開発者は属性をどこに配布するかを明示的に定義する必要があります。

<テンプレート>
  <ヘッダー>...</ヘッダー>
  <main v-bind="$attrs">...</main>
  <フッター>...</フッター>
</テンプレート>

要約:

• Vue は中国で最も人気のあるフロントエンド フレームワークの 1 つです。パフォーマンスが向上し、実行速度は vue2 の 1.2 ～ 2 倍になります。
• サイズが小さいため、vue2 のオンデマンドコンパイルのサイズは小さくなります。
• 型推論と ts のサポート強化もトレンドです。
• 高レベル API は、低レベル API を公開し、より高度な組み込みコンポーネントを提供します。
• 統合されたAPIにより、ロジックの整理、ロジックのカプセル化、ロジックの再利用が改善

これで、vue2 に対する vue3 の利点に関するこの記事は終了です。vue2 に対する vue3 の利点の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。