公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために使用される可能性があるため、データは初期データ オブジェクトを返す関数として宣言する必要があります。データが純粋なオブジェクトのままであれば、すべてのインスタンスが同じデータ オブジェクトへの参照を共有することになります。データ関数を提供することで、新しいインスタンスが作成されるたびに、データ関数を呼び出して初期データ オブジェクトの新しいコピーを返すことができます。面接官が面接中にこの質問をしたのを見たとき、私はその時混乱し、その理由について考えたことはありませんでした。ただ、コードはこのように書く必要があるとわかっていました。最近時間ができたら、この部分の原理についてさらに詳しく学ぶために戻ってきます。私が答えたい質問が 2 つあります。 1. インスタンスを繰り返し作成する際に同じデータを共有することで発生するデータ汚染を回避するため 2. 関数を記述する理由は、オブジェクトの独立性を保証するためです。オブジェクトが一意であることを保証できる場合は、関数を記述せずにオブジェクトを直接記述できます。 実際のところ、すべてはデータ汚染を避けることに帰着します。 この問題を解決したいのであれば、プロトタイプチェーンなどについて話し合う必要があります。 関連する知識を自分で学ぶことができます。オブジェクトはプロトタイプ チェーン内で共通のプロパティとメソッドを共有します。 Person1 と person2 は Person への参照であるため、person2 がデータを変更すると、実際に変更されるのは Person のデータです。 Personのデータが変更されたため、Person1の参照も変更されます。 関数Person(){ } Person.prototype.datas={ a:"c", f:'h' } var person1 = 新しいPerson() var person2 = 新しいPerson() person2.datas.a="wewew" コンソールログ(人2) コンソールログ(人1) 私はいつも疑問を抱いていました。person1 と person2 はどちらも Person への参照であるのに、なぜそれらをオブジェクト内に配置するとデータ汚染が発生し、メソッド内に配置するとデータ汚染が発生しないのでしょうか?まず、1 つ知っておくべきことがあります。関数が定義されているときには、 this の方向は決定できません。関数が実行されたときにのみ、 this が実際に指している対象を決定できます。実際、 this は、それを呼び出すオブジェクトを指します。もう一つ質問があります。同じ方法を指しているのに、なぜ結果が異なるのでしょうか?彼はクローンを作ったのですか?回答: コンストラクター内で定義されたメソッドは、各インスタンスに複製されます。コンストラクターの 関数Person(){ this.datas = this.sayHello() //this はそれを呼び出すオブジェクトを参照します} Person.prototype.sayHello = 関数 () { 戻る { d:1、 2:2 です } }; var person1 = 新しいPerson() var person2 = 新しいPerson() person2.datas.d="wewew" コンソールログ(人1) コンソールログ(人2) 具体的な例は以下のとおりです 1. 通常状態では、データ機能を使用する場合、データ汚染は発生しません。 <em id="__mceDel">ButtonTest.vue<br><テンプレート> <div> <div>{{ カウント }}</div> <button @click="onAdd">追加</button> </div> </テンプレート> <スクリプト> エクスポートデフォルト{ データ() { 戻る { カウント: 0, }; }, メソッド: { 追加() { this.count++; }, }, }; </script><br></em> ホーム.vue <テンプレート> <div class="home"> <ボタンテスト></ボタンテスト> <ボタンテスト></ボタンテスト> </div> </テンプレート> <スクリプト> "@/components/ButtonTest.vue" から ButtonTest をインポートします。 エクスポートデフォルト{ 名前: "ホーム", コンポーネント: ボタンテスト、 }, }; </スクリプト> 2. データがオブジェクトとして直接定義されている場合、エラーが報告されます 3. 外部オブジェクトのフォームを定義し、ボタンをクリックすると、2つのデータが同時に追加され、データ汚染が発生します。 これまでのところ、この記事では、なぜ vue データが関数であるのかについて説明しています。記事はこれで終わりです。vueデータ関数の関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 以下もご興味があるかもしれません:
|
Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...
Sublime Text 2 は、軽量でシンプル、効率的なクロスプラットフォーム エディターです。ブ...
1. はじめにページを作成しているときに、複数列のレイアウトに遭遇することがあります。各列の内容が異...
【質問】外側のテーブルと内側のテーブルがネストされていて、内側のテーブルと外側のテーブルの両方に境界...
マウスをホバーすると画像が折りたたまれる効果を実現する CSS 1. 実施のポイント折り畳みは複数の...
<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストール...
MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...
1. エフェクト表示JavaScript で書かれた宇宙飛行士のウォッチフェイス。 http://x...
Ⅰ. 問題の説明: CSS を使用して画像の 3D 凸凹効果を実現します。 Ⅱ実施手順は以下のとお...
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...
1. はじめに数日前、開発仲間から、フィールドを同じ値に更新すると binlog が記録されるかどう...
システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...
シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...
データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...
1. インデックスを作成する理由(メリット)インデックスを作成するとシステムのパフォーマンスが大幅に...