vue が 2.0 から 3.0 に更新された後、それは単に軽くなり、より速くなり、より使いやすくなりました。各バージョンの反復は、私たちにとっても、前のバージョンのアップグレードと最適化です。ユーザーエクスペリエンスはますます向上しています。次に、開発者に焦点を当てて、2 つの異なるバージョンの違いについて説明します。

詳しい説明

1. vue2.0と 3.0 の初期化には特定の違いがあります。たとえば、vue3.0 ではスキャフォールディングのインストール中にプロジェクト開発に必要ないくつかのプラグインを事前にインストールできますが、3.0 ではスキャフォールディングを視覚的に作成できます。プラグインと依存関係の管理と構成がより便利になると同時に、2 つのバージョンのディレクトリ構造も若干異なります。

2. 開発プロセスでは、表面上の 2 つのバージョンの使用方法に大きな違いはありませんが、レンダリング方法などの根本的な側面に注目すると、データ監視、双方向バインディング、ライフサイクル、vue3 のより正確な変更通知、

ここでは、双方向バインディングに関する更新に焦点を当てます。

vue2の双方向データバインディングは、ES5 の API である Object.definePropert() を使用してデータをハイジャックし、パブリッシュ/サブスクライブモードと組み合わせることで実装されます。

Vue3 は es6 の ProxyAPI を使用してデータをプロキシし、各オブジェクトは reactive() 関数を通じてプロキシのレイヤーでラップされ、プロパティの変更はプロキシを通じて監視され、データが監視されます。

这⾥是引相⽐于vue2版本，使⽤proxy的优势如下
1.defineProperty只能监听某个属性，不能对全对象监听
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
2.可以监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。
复制代码

3. さらに、vue3 にはいくつかの新しい組み込みコンポーネントとメソッドも追加されています。たとえば、vue3 はデフォルトで遅延監視を実行したり、関数ベースの API を使用したり、セットアップ関数を使用したり、プラグインやオブジェクトのオンデマンド導入、計算を実行したりできます。価値、新しく追加された TypeScript や PWA のサポートなど... ここでは、vue3 のオンデマンド導入に焦点を当てます。

Vue2 の新しいインスタンスオブジェクト内のすべてのもの、
ユーザーの読み込み時間。

vue3.0 では、ES モジュールインポートを使用して、キープアライブ組み込みコンポーネント、v-model 命令などをオンデマンドでインポートできます。これにより、開発がより便利になり、メモリ消費が削減されるだけでなく、ユーザー数も削減され、読み込み時間も短縮され、ユーザーエクスペリエンスが最適化されます。

vue2 および vue3 プロジェクトの作成に使用されるファイルの変更

1.main.js

コアコード:
createApp(App).mount('#app') = createApp(rootコンポーネント).mount('public/index.htmlのdivコンテナ')

1. vue2.0 では、vue インスタンスが直接作成されます
2. vue3.0 では、createApp がオンデマンドでエクスポートされます (ceateApp が行うこと)
3. vue3 のアプリの単一ファイルはルート要素を持つ必要がなくなりましたつまり、vue2.0 ではルート要素が必要ですが、vue3 ではそのような要件はありません。

<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
复制代码

データ双方向バインディングの原則

Vue2 はデータハイジャックに Object.defineProperty() を使用します。これはパブリッシュとサブスクリプションと組み合わせて実装されます。

Vue3 はProxy を使用し、ref または reactive を使用してデータを応答性の高いデータに変換します。

データとメソッドの定義

Vue2 はオプション API (Options API) を使用し、Vue3 は合成 API (Composition API) を使用します。

ビュー 2:

data() { return {}; }, methods:{ }
复制代码

ビュー 3:

データとメソッドはセットアップで定義され、return{} は均一に実行されます。

ライフサイクル

小道具を入手する

vue2：console.log('props',this.xxx)
vue3：setup(props,context){ console.log('props',props) }

親コンポーネントに出力された値を渡す

vue2：this.$emit()
vue3：setup(props,context){context.emit()}

著者：Yu Ting
リンク：https://juejin.cn/post/7097938704744284197
出典：レアアースナゲット
著作権は著者に属します。商業転載の場合は作者に許可を、非商業転載の場合は出典を明記してください。

vue3.0とvue2.0の違い