vue 2.x 与vue 3.x

Vue 3 の概要:

vue 3 のリファクタリングの背景については、You Da の発言を参照してください。Vue の新しいバージョンのコンセプトは 2018 年末に形成されました。当時、Vue 2 のコードベースはすでに 2 年半前のものでした。一般的なソフトウェアのライフサイクルはそれほど長くないように思えますが、その間にフロントエンドの世界は大きく変化しました。Vue のメジャーバージョンを更新 (および書き換え) する際に、2 つの主な要素を考慮します: 1 つ目: 主要なブラウザーでの新しい JavaScript 言語機能のサポートレベル; いくつかの設計および構造上の問題が明らかになった; 簡単に言うと: 新しい言語機能 (es6) を使用する) アーキテクチャ上の問題を解決する

では、vue 3 では何が変更されたのでしょうか?

より速くする
小さくしてください
よりメンテナンスしやすくする
ネイティブをターゲットにしやすくする
生活を楽に
上記からわかるように、vue3 の新機能の概要は次のとおりです。
速度が速く、サイズが小さくなり、保守が容易になり、ネイティブに近くなり、使いやすくなります。

もっと早く：

書き直された仮想 dom 実装
コンパイラに基づいた高速パス
より効率的なコンポーネントの初期化
アップデートのパフォーマンスが 1.3 ～ 2 倍向上
2～3倍高速なSSR
上記のことから、高速化の理由がわかります: vue 3 による仮想 DOM 実装の書き換え、コンパイルされたテンプレートの最適化、コンポーネントの初期化の効率化、更新パフォーマンスが 1.3 ～ 2.x 向上、SSR 速度が 2 ～ 3 倍向上;

小さいサイズ:

ツリーシェーキング - ほとんどのオプション機能 (egv-model、<transition>) がツリーシェーキング可能になりました
ベアボーン HelloWorld サイズ: 13.5kb、Composition API サポートのみの場合は 11.75kb
すべてのランタイム機能が含まれる:22.5kb;その他の機能が含まれる:22.5kb
上記のことから、ボリュームが小さくなる理由がわかります。Webpack のツリーシェーク機能により、不要なモジュールを「クリップ」し、必要なモジュールのみをツリーシェークできるため、開発者にとって次の 2 つの利点があります。全体のサイズが大きすぎることを心配する必要がなく、他の機能が増え、ユーザーにとってはパッケージのサイズが小さくなり、Vue はパッケージの全体のサイズを気にすることなく、より多くの他の機能を開発できます。

メンテナンスが容易になります:

Compostion API : 既存のオプション API と併用可能。
柔軟なロジックの構成と再利用；
反応性モジュールはスタンドアロンライブラリとして使用可能
以上より、メンテナンスが容易になる理由は、既存の Options API と併用できること、ロジックの柔軟な組み合わせと再利用が可能であること、Vue 3 モジュールは他のフレームワークと併用できることです。

Typescript サポートの向上:

TypeScript サポートの向上: 自動生成された型定義を使用して TS で記述されたコードベース；
API は JS と TS で同じです。実際、コードもほぼ同じになります。
TSXのサポート
クラスコンポーネントは引き続きサポートされます（vue-class-component@nextは現在アルファ版です）
上記からわかるように、Vue 3 は typecrpt に基づいて記述されており、自動型定義ヒントを利用できます。

コンパイラは以下をオーバーライドします。

コンパイラの書き換え：プラグイン可能なアーキテクチャ。
位置情報を含むパーサー (ソースマップ!)
より堅牢な IDE サポートのためのインフラストラクチャとして機能します

ネイティブに近いもの:

カスタムレンダラー API ;import {createRenderer } から '@vue/runtime-core' ;const {render} =createRenderer({nodeOps,patchData});
上記からわかるように、ネイティブに近く、レンダリング API をカスタマイズできます。

より使いやすく:

公開されたリアクティビティ API;import{observavle,effect} から 'vue';const state=observable({count:0}) ;efftct(()=>{console.log(`count is:${state.count}`} );state.count++;
上記からわかるように、使いやすくなり、リアクティブ API が公開されています。
コンポーネントが再レンダリングされる理由を簡単に特定します。;const Comp ={render(props){return h('div',props.count)},renderTriggered(event){debugger}}
上記からわかるように、使いやすく、コンポーネントが再レンダリングされる理由を簡単に特定できます。

Vue3 の新機能:

vue 3 で注目すべき新機能としては、フラグメント、テレポート、createRenderer、コンポジション API、およびコンポジション API などがあります。

フレームメント:

<テンプレート>

<ヘッダー>...<ヘッダー>

<フッター>...</フッター>

</テンプレート>

このことから、vue 3 ではコンポーネントが複数のルートノードをサポートするようになり、各コンポーネントがノードをラップする必要がなくなり、dom の数が減り、ブラウザのレンダリングが高速化されたことがわかります。

テレポート:

テレポートは、テンプレートを DOM 内の Vue アプリの外の他の場所に移動できるテクノロジーで、ドラえもんの「Any Door」に少し似ています。Vue 2 では、モーダル、トーストなどの要素が Vue の特定のコンポーネント内にネストされている場合、ネストされたコンポーネントの位置、Z インデックス、スタイルを扱うことが非常に困難になります。コンポーネントの論理位置にテンプレートコードを記述し、それを vue アプリケーションのスコープ外でレンダリングできます。

createRenderer：

createRenderer に関しては、基本的な使用法を理解しています。
improt {createRenderer} から "@vue/runtime-core";
const {render,createApp}=createRenderer({ patchProp,insert,remove,createElement}) import {render,createApp};export *from '@vue/runtime-core'
createRender を通じてカスタムレンダラーを構築でき、vue の開発モデルを他のプラットフォームに拡張でき、キャンバスキャンバス上に生成できます。手順: テンプレート --> App オブジェクトの render() - render() 関数を呼び出します。後 -----------> Vnode 仮想ノード -------- キャンバス API と呼ばれる -----> 実際のキャンバス要素 -- キャンバス API と呼ばれる -----> キャンバスプラットフォーム

合成API

compostion API も合成 API であり、このフォームを使用することでコードのメンテナンスが容易になり、同じ機能を持つ変数を一元管理できます。
合成 API の使用に関して、展開するための次の図は次のとおりです。

使い方は簡単:

デフォルトをエクスポート{

const count=ref(0);

const double=computed(()=>{count.value*2});

関数インクリメント(){

カウント.値++

}

onMounted(()=>{console.log("コンポーネントがマウントされました")})

戻り値 { カウント、倍精度、増分}

}

互換性のない変更

グローバル API: グローバル Vue API はアプリケーションインスタンスを使用するように変更され、グローバル API と内部 API はツリーシェイク可能になるようにリファクタリングされました。
テンプレートディレクティブ: コンポーネントでの v-model の使用法が変更されました。<template v-for> ノードと非 v-for ノードでのキーの使用法が変更されました。同じ要素の v-if と v-for の優先順位が変更されました。v-bind= 'object'順序に依存するようになりました。v-for の ref は ref 配列を登録しなくなりました。
コンポーネント: 機能コンポーネントは通常の関数を使用してのみ作成できます。機能属性は単一ファイルコンポーネント (SFC) 内にあります。非同期コンポーネントを作成するには、defineAsyncComponent メソッドが必要になりました。
レンダリング関数: レンダリング関数 API が変更されました。scopedSlotsproperty が削除され、すべてのスロットがスロットを介して関数として公開されました。カスタムディレクティブ API がコンポーネントのライフサイクルと一致するように変更されました。一部の変換クラスの名前が変更されました: v-enter-->v -enter-from,v-leave->v-leave-from; コンポーネントの監視オプションとインスタンスメソッド $watch はドット区切りの文字列パスをサポートしなくなりました。計算関数をパラメータとして変更してください。Vue 2.x では、ルートコンテナーの externalHTML は、ルートコンポーネントのテンプレートで置き換えられます (ルートコンポーネントにテンプレート/レンダリングオプションがない場合、最終的にはテンプレートにコンパイルされます)。Vue3.x はアプリケーションコンテナの innerHTML を使用するようになりました。
その他の小さな変更: 破棄されたライフサイクルオプションはアンマウントに名前変更されました; beforeDestory ライフサイクルオプションは beforeUnmount に名前変更されました; [porp のデフォルトファクトリ関数は this is context にアクセスできなくなりました; カスタムディレクティブ API はルートコンポーネントのライフサイクルと一貫性を持つように変更されました; データは常に関数として宣言; ミックスインからのデータオプションを簡単にマージできるようになりました; 属性強制戦略が変更されました; 一部の遷移クラスの名前が変更されました; コンポーネント監視オプションとインスタンスメソッド $watch. 文字列パス、代わりに計算されたプロパティ関数をパラメーターとして使用します; <テンプレート>特別なディレクティブ (v-if/else-if/else、v-for、または v-slot) のないタグは通常の要素として扱われるようになり、内部コンテンツをレンダリングするのではなく、ネイティブに <template> 要素になります。Vue 2.x では、アプリケーションのルートコンテナのアウター HTML は、ルートコンポーネントのテンプレートで置き換えられます (ルートコンポーネントにテンプレート/レンダリングオプションがない場合、最終的にはテンプレートにコンパイルされます)。Vue 3.x では、アプリケーションコンテナの内部 HTML が使用されるようになりました。これは、コンテナ自体がテンプレートの一部とみなされなくなったことを意味します。
削除された API: keyCode は、v-on 修飾子、on、off、フィルターフィッター、インラインテンプレート属性、$destroy インスタンスメソッドとしてサポートされています。ユーザーは、個々の Vue コンポーネントのライフサイクルを手動で管理する必要がなくなりました。

おすすめ