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

レスポンシブ原則と 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue2.x の応答性の簡単な説明と例
  • Vue2は応答性を提供するためにprovide injectを実装しています
  • Vue のデータ応答性について少し学びましょう (Vue2 と Vue3 の違い)
  • Vue2x をベースにしたレスポンシブ アダプティブ カルーセル コンポーネント プラグイン VueSliderShow 関数の実装
  • Vue2.0のレスポンシブ性を実装するための基本的な考え方について簡単に説明します。
  • vue2.0 レスポンシブ アーキテクチャを理解して分析するための 100 行のコード
  • Vue2 レスポンシブシステム非同期キュー

<<:  nginxのアップストリーム設定と機能の詳細な説明

>>:  Windows 10 での MySQL 8.0.11 圧縮バージョンのインストール チュートリアル

推薦する

XHTMLはHTMLのいくつかの廃止された要素を使用しなくなりました

CSS ウェブページレイアウトを行う場合、XHTML1.0 仕様に準拠する必要があることは誰もが知っ...

入力ファイルのカスタムボタンの美化(デモ)

以前にも同じような記事を書いたことがありますが、js スクリプトを使用しており、ファイルパスを表示で...

アイデアはDockerプラグインを使用してワンクリックの自動デプロイを実現します

目次環境: 1. Dockerはリモート接続アクセスを可能にするidea dockerプラグインをイ...

MySQL 5.7.18 MSI インストール グラフィック チュートリアル

この記事では、参考までにMySQL 5.7.18 MSIインストールチュートリアルを紹介します。具体...

MySQL 起動エラーを解決する: エラー 2003 (HY000): 'localhost' の MySQL サーバーに接続できません (10061)

このエラーは初心者によく発生します。この記事では主に、エラー 2003 (HY000): '...

Docker コンテナのカスタム ホストのネットワーク アクセス操作

docker-compose.yml に extra_hosts キーワードを追加すると、コンテナの...

XHTML 入門チュートリアル: よく使われる XHTML タグ

<br />記事と同様に、Web ページにも明確な段落と重要度の異なるタイトルが必要です...

MySQLクエリの基本的なクエリ操作の学習

序文MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーショ...

MySQL 8.0.13 のダウンロードとインストールのチュートリアル(画像とテキスト付き)

MySQL は最もよく使用されるデータベースです。詳しく知るには、コンピュータにインストールする必...

Telnet は Alpine イメージの busybox-extras に移動されました

Alpine イメージの telnet はバージョン 3.7 以降、busybox-extras パ...

Linux リダイレクトの使用方法の詳細な説明

誰でも時々データをコピーして貼り付ける必要があると思います。コピーして貼り付けるためにファイルを開く...

HTMLページの読み込みと解析プロセスの詳細な紹介

ブラウザがHTMLを読み込みレンダリングする順序1. IE は上から下へダウンロードし、上から下へレ...

MySQLのレプリケーションの詳細な分析

1.MySQLレプリケーションの概念これは、プライマリ データベースの DDL および DML 操作...

Node.js で MySQL データベースにバッチデータを挿入する方法

プロジェクト(nodejs)では、一度に複数のデータをデータベースに挿入する必要があります。データベ...

MySQL は制限を使用してページング例メソッドを実装します

1. 制限の基本的な実装一般的に、クライアントは、pageNo (ページ番号) と pageSize...