Vueでデータ例を定義する方法

Vueでデータ例を定義する方法

序文

開発プロセスにおいて、変数の定義は非常に頻繁かつ基本的なタスクです。変数の使用シナリオと範囲に応じて変数を合理的に定義する方法は、非常に小さく、間違いやすいものです。

Vue2 は長年にわたって人気があります。ほとんどの開発者は、開発プロセス中にデータ オプションで多くの変数を定義することを好みます。これは、コードの可読性、保守性、パフォーマンスに非常に悪影響を及ぼします。変数をうまく使用するには、Vue と JS の特性を組み合わせる必要があります。

Vue では、双方向データバインディングが必要かどうかに応じて、変数は次の 2 つのタイプに分けられます。

1つは、Vue のデータを乗っ取り、データの変更にビューでリアルタイムに反応することです。

データがメッセージのみを変更できる限り、テンプレートにバインドされたメッセージはリアルタイムで応答します。

<テンプレート>
  <div>{{メッセージ}}</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    メッセージ: "" 
  }
};
</スクリプト>

Vue データにハイジャックされる必要のない別の方法があります:

スクリプト内でのみ機能し、テンプレートでは使用されず、データのハイジャックは必要ありません

nameはconcatName関数内でのみ有効なので、ローカル変数として定義するだけです。

age は getAge 関数と concatName 関数の両方で必要です。これをローカル変数として使用するのは適切ではありません。その場合、そのスコープを拡大して複数の場所での使用を容易にすることができます。

<スクリプト>
定数 age = 'bar'
エクスポートデフォルト{
  メソッド: {
    年齢を取得する() {
      復帰年齢
    },
    連結名() {
      名前を 'nordon' にします
      `名前:${name}、年齢: ${age}` を返します
    }
  },
};
</スクリプト>

これはテンプレート内のレンダリング データとしてのみ使用されます。カスタマイズ後は、以降の操作では変更されません。Vue を使用してこのデータをハイジャックすると、パフォーマンスがいくらか低下します。

<テンプレート>
  <div v-for="item in arr">{{item.name}}</div>
</テンプレート>

<スクリプト>
const arr = Object.freeze([{
  名前: 'nordon',
  年齢: 18
}])
エクスポートデフォルト{
  データ() {
    戻る {
      アール
    }
  }
};
</スクリプト>

Object.freeze を使用して、データハイジャックが不要なデータをフリーズします。データハイジャックのために Vue 内のデータを再帰的にトラバースする場合、データはハイジャックされません。特に、テーブルのようなデータが大量にある場合は、パフォーマンスが大幅に向上します。

Vue のソース コードを見ると、Object.freeze を使用してデータを処理した後、データのハイジャックが発生しない理由がわかります。

関数defineReactive(obj, key) {
  // 関係のないコードを削除し、判定条件のみを残します const property = Object.getOwnPropertyDescriptor(obj, key)
  if (プロパティ && property.configurable === false) {
    戻る
  }
}

要約する

Vue でデータを定義する方法についての記事はこれで終わりです。Vue でのデータ定義に関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  IDEA2020.1.2 Webプロジェクトの作成とTomcatの設定に関する詳細なチュートリアル

>>:  MySQLはgroup_concat()関数に基づいて複数のデータ行を結合します

推薦する

Mysqlは隣接リスト(隣接リスト)を通じてツリー構造を保存します。

以下の内容では、隣接リストを使用してツリー構造を保存する MYSQL のプロセスとソリューションを紹...

Vue3 を使用して虫眼鏡効果を実現する方法の例

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. 準備2. 梱包を開始する...

Linux のハードリンクとソフトリンクの区別

Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...

Docker を使用して Spring Boot をデプロイする方法の例

ここでは主に、スタンドアロンのプログラムを生成できるspring-bootと、Mavenプラグインd...

オンラインチャットを実現するVue+sshフレームワーク

この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参...

JavaScript でサウンド効果付きの花火効果を実装する

コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...

MySQLデータベース操作の基本コマンド

1. データベースを作成します。 データ data _name を作成します。 PHP でデータベー...

Centos7 への mysql8.0rpm のインストール チュートリアル

まず、図をダウンロードしてください 1. まず、centos7に付属しているmariadbをアンイン...

Node.js で簡単なクローラーケースを作成するチュートリアル

準備まず、nodejs をダウンロードする必要がありますが、これは問題ないはずです。原文はwebst...

HTMLフォーム送信方法のケーススタディ

フォームの送信方法をまとめると次のようになります。 1. 送信ボタンを使用して送信します。送信ボタン...

Dockerはnginxをデプロイし、フォルダとファイル操作をマウントします

この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...

Linux ソフトウェアのインストール場所を確認する簡単な方法

1. ソフトウェアのインストールパスを確認します。 Linuxソフトウェアをインストールできる場所は...

Redission-tomcatは、単一マシンから複数マシンへの展開を迅速に実装します。

序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...

MySQL 5.7 クラスタ構成手順

目次1. サーバーAのmy.cnfファイルを変更する2. サーバーBのmy.cnfファイルを変更する...