vue2 と vue3 の間の双方向データ バインディングの原則は異なります。
2.0 の応答性は、ES6 のObject.definePropertyのset メソッドと get メソッドに基づいており、データ オブジェクトの変更を監視できますが、オブジェクト プロパティの追加と削除、配列要素と長さの変更は監視できず、Vue で初期化されます。 Observer (オブザーバー) は、データ オブジェクトのプロパティの変化を観察するために確立されています。
vueの応答性を実装する際、配列APIが監視できない状況は配列の一部のメソッドを書き換えることで実現しますが、以下の7つのメソッドに限定されます
-
自動更新をトリガーする方法
-
-
(元のデータ型を変更する 7 つの方法) プッシュ、ポップ、スプライス、アンシフト、シフト、ソート、リバース
-
-
-
解決策 (更新): データ内の配列を上書きします。
-
-
Object.defineProperty(劫持的对象, '监听的属性', {
get: function() {
// 访问了被监听的对象的属性时触发
},
set: function(newVal) {
// 修改了被监听的对象的属性时触发
}3.0 応答では、 Object.defineProperty の代わりにES6プロキシを使用します。これにより、オブジェクト プロパティの追加と削除、配列要素と長さの変更を監視でき、遅延監視 (遅延監視)も実装されます(初期化中に作成されません)。ただし、主流のブラウザはプロキシをサポートしていますが、
let newModel = new Proxy(代理的对象, {
get: function(target, key) {
// 访问了对象的属性时触发
},
set: function(target, key, newVal) {
// 修改了对象的任意属性时触发
}
})Vue3: ts のサポートの向上、高速化、サイズの縮小、メンテナンスの容易化、ネイティブに近く、使いやすく、高速化
vueの応答性を実装する際、配列APIが監視できない状況は配列の一部のメソッドを書き換えることで実現しますが、以下の7つのメソッドに限定されます
ビューとは何ですか?
-
Vue はユーザー インターフェイスを構築するための JavaScript フレームワークです
-
Vue は、ボトムアップで段階的に開発された進歩的な MVVM フレームワークです。
-
プログレッシブ: つまり、vue は独自の管理機能を実行し、他の管理されていない領域には影響を与えないため、vue はサードパーティのプラグインと適切に組み合わせることができます。
-
インクリメンタル: まず開発プロジェクトの基本機能を完了し、次にさまざまな高度な Vue プラグインを使用して複雑な機能を完了します。
-
-
インストール - vue のデバッグに必要なツール vue-devtools の学習 - 公式規定: csdn が書いています
MVVM
-
M：モデル
-
モデル: ストアデータ、データ
-
-
V：ビュー
-
ビュー: ユーザーが見ることができるインターフェイス
-
-
VM：ビューモデル
-
ビュー モデル: 関連するビューとモデルの間のブリッジであり、データ レイヤーとビュー レイヤー間のデータ転送に使用されます (双方向バインディング)。
-
MVC
- MVCはModel-View-Controllerの略であり、MVVMはModel-View-ViewModelの略です。
- MVC では、コントローラー (Controller) が仲介者として機能し、ユーザーのリクエストを処理し、モデル (Model) とビュー (View) の間の関係を更新する責任を負います。MVVM では、ビュー モデル (ViewModel) がそのような役割を果たします。
- 通常、MVC ではビュー (View) がモデル (Model) から直接データを取得して表示しますが、MVVM ではビュー (View) がビュー モデル (ViewModel) を通じてデータを取得して表示します。
MVP
viteとwebpackの違い
v3 は vue/cli スキャフォールディングを使用します (基本的に、プロジェクトのビルドとコンパイルに役立つように webpack をパッケージ化するのに役立ちます)
Vite の利点:高速コールド スタート、高速動作、ホット アップデート、高速パッケージング、シンプルな構成
小規模プロジェクトや初心者の場合、開発環境を迅速に開始し、待ち時間を短縮し、開発者がコードをより速く反復してテストできるため、Vite を検討できます。大規模なプロジェクトやビルド パフォーマンスに対する高い要件があるプロジェクトの場合は、Webpack を選択できます。これは、Webpack がさまざまな複雑なビルド シナリオをサポートし、さまざまなプラグインやローダーを通じてビルド パフォーマンスを最適化できるためです。
1. vite 開発サーバーは webpack よりも速く起動します (高速コールド スタート)
webpack は最初にパッケージ化し、次に開発サーバーを起動し、サーバーを要求するときにパッケージ化結果を直接提供します。
Vite は開発サーバーの起動時にパッケージ化する必要がないため、モジュールの依存関係を解析したりコンパイルしたりする必要がないため、起動速度が非常に速くなります。ブラウザがモジュールを要求すると、モジュールのコンテンツは必要に応じてコンパイルされます。このオンデマンドの動的コンパイル方法により、コンパイル時間が大幅に短縮され、プロジェクトが複雑になり、モジュールが増えるほど、vite の利点がより明らかになります。
2. Vite ホット アップデート (変更されたコードは自動的にコンパイルされる) は webpack よりも
高速です。モジュールが変更された場合、モジュールのすべての関連依存モジュールをコンパイルする必要がある webpack とは異なり、vite はブラウザーにモジュールを再度リクエストするよう要求するだけで済みます。一度の高効率化。
3.vite は webpack の nodejs よりも 10 ～ 100 倍速くビルドされます。
Vite の欠点:
1. Webpack ほどエコロジーが良くなく、ローダーやプラグインが十分に充実していない
2. プロジェクトの開発ブラウザは ES Module をサポートする必要があり、CommonJS 構文を認識できない
vue をダウンロードしてインストールします: 文法を学習するための npm Yarn インストール
まず init -y で package.json ファイルを作成します。次に vue をダウンロードします。
npm i [email protected]
npm i [email protected]データ: 2 つの作成方法
Vue2: オブジェクトタイプ (2 通常使用): el: "プロパティ名"、通常のプロパティ mount.$mount() メソッド。
<!-- 1.创建视图层 -->
<div id="demo">
{
{text}}
</div>
<script>
// 2.创建vm层，就是vue实例
let app = new Vue({
// //关联视图：el:'demo'
// el: '#demo'
// // 3.创建模型数据
// data:{
// text: '今天是个好日子',
// }
data(){
return{
text: '我很开心'
}
}
})
// 关联视图，挂载方式
app.$mount('#demo')
</script>vue3: 関数型 (2 と 3 の両方を使用可能、推奨)
<!-- 在vue3中创建，要使用createApp()方法来进行创建 -->
<!-- 1.创建视图层 -->
<div id="demo">{
{text}}</div>
<script>
// 2.创建VM层，就是vue实例
Vue.createApp({
// 3.创建模型数据
data(){
return {
text: '我是vue3创建的'
}
}
})
//关联视图
.mount("#demo")
</script>データがオブジェクトではなく関数である理由: (推奨される関数スタイル)
オブジェクトの場合、コンポーネントを複数回再利用するとデータ共有が発生し、あるコンポーネントのデータが変更されると、他のコンポーネントのデータにも影響が及び、データ汚染が発生します。
関数の場合、コンポーネントを 1 回使用し、data() を 1 回呼び出して、異なるオブジェクトを生成します。相互間のデータは影響を受けません。
したがって、コンポーネント インスタンス オブジェクトのデータは関数である必要があります。その目的は、複数のコンポーネント インスタンス オブジェクトが 1 つのデータを共有してデータ汚染が発生するのを防ぐことです。関数の形式では、データの初期化時にファクトリ関数として使用され、新しいデータ オブジェクトが返されます。