レスポンシブ原則と 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 圧縮バージョンのインストール チュートリアル

推薦する

JSコンストラクタとインスタンス化およびプロトタイプ導入の関係

目次1. コンストラクタとインスタンス化2. コンストラクターとインスタンス化の関係は何ですか? 3...

ウェブページ制作時のコードコメントの書き方

<br />私の仕事で使用しているアノテーションの書き方の基準をまとめました。技術的な内...

MySQL シリーズ 13 MySQL レプリケーション

目次1. MySQLレプリケーション関連の概念2. シンプルな1マスター1スレーブアーキテクチャの実...

MySQL アクティブ-アクティブ同期レプリケーションの 4 つのソリューションの詳細な説明

目次MySQLネイティブレプリケーションに基づくマスター-マスター同期ソリューションGaleraレプ...

MySQL における exists、in、any の基本的な使い方

【1】存在するループを使用して外部テーブルを 1 つずつクエリし、各クエリの存在する条件ステートメン...

ドメイン名を介してプロジェクトにアクセスするnginx + tomcatの例

ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...

JavaScript の 50 以上のユーティリティ関数の概要

JavaScript は多くの素晴らしい機能を備えています。この記事では、作業効率の向上とコードのデ...

Docker イメージのデフォルトの保存場所を変更する方法 (ソリューション)

システムの初期のパーティション分割により、オペレーティング システム内の対応する / パーティション...

JavaScriptはeコマースプラットフォームの製品詳細を実装します

この記事では、電子商取引プラットフォームで商品の詳細を表示する一般的な例を紹介します。たとえば、ある...

Docker を使用した nextcloud パーソナル ネットワーク ディスクの構築に関するチュートリアル

目次1. はじめに2. 導入環境ツール4. 展開プロセス要約する1. はじめにNextcloud は...

MySQL オンライン DDL ツール gh-ost 原理分析

目次1. はじめに1.1 原則1.2 プロセス1.3 特徴1.4 githubアドレス2. テスト環...

webpackを使用してTypeScriptコードをパッケージ化およびコンパイルする方法を教えます

TypeScript バンドルwebpack 統合通常、実際の開発では、ビルド ツールを使用してコー...

要素に丸い境界線を追加する border-radius メソッド

border-radius:10px; /* すべての角は半径 10px で丸められます*/ bor...

JavaScript プロトタイプチェーンを理解するための 2 つの図

目次1. プロトタイプの関係2. プロトタイプチェーン3. 結論序文:前回の記事では、JavaScr...