レスポンシブ原則と Vue2.0/3.0 の違いについての簡単な分析

序文

vue3.0 が正式にリリースされて以来、多くの友人が vue3.0 に切り替えました。ここでは、皆さんの学習のためにまとめた 3.0 と 2.0 の原則とそれらの違いを書き留めておきます。

ステップ 1: vue2.0 のレスポンシブ原則

まずは公式サイトの説明をご覧ください。

プレーンな JavaScript オブジェクトを Vue インスタンスのデータ オプションに渡すと、Vue はオブジェクトのすべてのプロパティを反復処理し、Object.defineProperty を使用してすべてをゲッター/セッターに変換します。 Object.defineProperty は ES5 ではシムできない機能であるため、Vue は IE8 以前のバージョンのブラウザーをサポートしていません。

これらのゲッター/セッターはユーザーには見えませんが、内部的には Vue が依存関係を追跡し、プロパティがアクセスまたは変更されたときに変更を通知できるようにします。ここで注意する必要がある問題は、データ オブジェクトを印刷するときにブラウザー コンソールが getter/setter を異なる方法でフォーマットするため、より使いやすい検査インターフェイスを取得するには vue-devtools をインストールする必要がある場合があることです。

各コンポーネント インスタンスには対応するウォッチャー インスタンス オブジェクトがあり、コンポーネントのレンダリング中にプロパティを依存関係として記録します。後で依存関係のセッターが呼び出されると、ウォッチャーに再計算が通知され、関連するコンポーネントが更新されます。

私の理解はこうです

実際、API とソース コードを読んだことがある人にとって、v-model と responsive 原則が 2 つのレイヤーに分かれていることを知ることは難しくありません。

• 最初のレイヤー、つまり最下層は、es5 の機能である Object.defineProperty で、getter と setter を通じてデータを更新します。
• 2 番目のレイヤーはプレゼンテーション レイヤーです。v-model の原則を読んだことがある人なら誰でも、v-model にウォッチャーがあることをご存知でしょう。v-onwatcher はデータの変更を監視し、v-on はビューを更新します。

ステップ2: vue3.0のレスポンシブ原則

まずは公式サイトの説明をご覧ください。

これが、vue3.0 がオブジェクトのプロパティを直接削除および変更できる理由です。

ステップ3: 2つの違いをまとめる

----------- 3.0

(最初の 2 つは、2.0 のように変更するように設定する必要がなくなりました。直接変更できます)

1. 3.0プロキシは配列型のデータを直接変更できる

2. オブジェクト属性を直接追加および削除できます

3.3.0はIE12以上と互換性があります

4. コンポーネントのv-model構文がv-bind.syncに変更されます。

5. 同じ要素でv-forとv-ifを使用する優先順位が変更されました

6. v-for のキーの使用方法が変更されました

7. v-forのrefは配列として登録されなくなりました

8、destroy、beforeDestroyライフサイクルはunmountedとbeforeUnmountに名前が変更されました

9、<template>はレンダラー内のコンテンツとしてではなく、通常の要素として扱われます。

公式サイトで発表された主な変更点は次のとおりです

要約する

これで、vue2.0/3.0 のレスポンシブ原則と相違点に関するこの記事は終了です。vue2.0/3.0 のレスポンシブ原則に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。