序文 開発プロセスにおいて、変数の定義は非常に頻繁かつ基本的なタスクです。変数の使用シナリオと範囲に応じて変数を合理的に定義する方法は、非常に小さく、間違いやすいものです。 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 のプロセスとソリューションを紹...
目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. 準備2. 梱包を開始する...
Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...
ここでは主に、スタンドアロンのプログラムを生成できるspring-bootと、Mavenプラグインd...
この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参...
コードを書くのに 30 分かかりましたが、この HTML5 Canvas New Year Fire...
1. データベースを作成します。 データ data _name を作成します。 PHP でデータベー...
まず、図をダウンロードしてください 1. まず、centos7に付属しているmariadbをアンイン...
準備まず、nodejs をダウンロードする必要がありますが、これは問題ないはずです。原文はwebst...
フォームの送信方法をまとめると次のようになります。 1. 送信ボタンを使用して送信します。送信ボタン...
この間、私は docker を勉強していたのですが、nginx をデプロイするときに行き詰まりました...
1. ソフトウェアのインストールパスを確認します。 Linuxソフトウェアをインストールできる場所は...
Scrcpyのインストールsnap install scrcpy adbサービスのインストールsu...
序文一部のプロジェクトの初期段階では、シンプルさとスピードのために、開発と展開は単一のマシンで行われ...
目次1. サーバーAのmy.cnfファイルを変更する2. サーバーBのmy.cnfファイルを変更する...