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 をよろしくお願いいたします。