公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために使用される可能性があるため、データは初期データ オブジェクトを返す関数として宣言する必要があります。データが純粋なオブジェクトのままであれば、すべてのインスタンスが同じデータ オブジェクトへの参照を共有することになります。データ関数を提供することで、新しいインスタンスが作成されるたびに、データ関数を呼び出して初期データ オブジェクトの新しいコピーを返すことができます。面接官が面接中にこの質問をしたのを見たとき、私はその時混乱し、その理由について考えたことはありませんでした。ただ、コードはこのように書く必要があるとわかっていました。最近時間ができたら、この部分の原理についてさらに詳しく学ぶために戻ってきます。私が答えたい質問が 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をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを...
目次1:mysql実行プロセス1.1: コネクタ1.2: キャッシュ1.3: アナライザー1.4: ...
まず効果を見てみましょう: コード: 1.html <div class="user...
VNodeとはvue.js には VNode クラスがあり、これを使用してさまざまな種類の vnod...
スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...
まず Linux に ssh をインストールします。例として Centos を使用します。ポータル:...
問題の説明:エラーメッセージ:原因: com.mysql.jdbc.PacketTooBigExce...
問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...
html、アドレス、引用ブロック、本文、dd、div、 dl、dt、フィールドセット、フォーム、フレ...
目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...
ウェブページに慣れていない友人の多くは私と同じように、HTML で要素、タグ、属性がどのように定義さ...
最近、Linux を使用してローカルにログインしていたところ、正常にログインできず、次のエラー メッ...
UI カットのプロセスでは、ページはヘッダー、コンテンツ、フッターの 3 つの部分で構成されることが...
成果を達成する コードhtml <div class="css-slideshow&...
目次1. vuexとは何か2. インストールと導入3. vuexの使用4. プロセスの紹介5. 突然...