vue data が関数である理由をご存知ですか?

vue data が関数である理由をご存知ですか?

公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために使用される可能性があるため、データは初期データ オブジェクトを返す関数として宣言する必要があります。データが純粋なオブジェクトのままであれば、すべてのインスタンスが同じデータ オブジェクトへの参照を共有することになります。データ関数を提供することで、新しいインスタンスが作成されるたびに、データ関数を呼び出して初期データ オブジェクトの新しいコピーを返すことができます。面接官が面接中にこの質問をしたのを見たとき、私はその時混乱し、その理由について考えたことはありませんでした。ただ、コードはこのように書く必要があるとわかっていました。最近時間ができたら、この部分の原理についてさらに詳しく学ぶために戻ってきます。私が答えたい質問が 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 は、それを呼び出すオブジェクトを指します。もう一つ質問があります。同じ方法を指しているのに、なぜ結果が異なるのでしょうか?彼はクローンを作ったのですか?回答: コンストラクター内で定義されたメソッドは、各インスタンスに複製されます。コンストラクターのprototypeで定義されたメソッドは、すべてのインスタンスでこのメソッドを共有しますが、各インスタンス内のメソッド参照は再定義されません: https://www.jb51.net/article/199830.htm

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

以下もご興味があるかもしれません:
  • vueはデータの問題を修正し、リアルタイムで操作を表示します
  • Vueサブコンポーネントはデータを変更したり操作を呼び出したりします
  • Vueデータ変数が相互に割り当てられた後のリアルタイム同期の解決手順
  • Vue データ内のプロパティをランダムに変更すると、ビューは更新されますか?

<<:  CSS シャドウアニメーションの最適化のヒント

>>:  最もよく使われるHTMLエスケープシーケンス

推薦する

フロントエンド プロジェクトのデフォルトのスクロール バー スタイルを変更する (概要)

スクロールバーのデフォルトスタイルを変更する必要があるプロジェクトを多数作成しましたが、プラグインを...

MySQLの実行プロセスとシーケンスについての簡単な説明

目次1:mysql実行プロセス1.1: コネクタ1.2: キャッシュ1.3: アナライザー1.4: ...

角度に基づくツリー型セカンダリテーブルを実現する

まず効果を見てみましょう: コード: 1.html <div class="user...

Vue.js での VNode の使用

VNodeとはvue.js には VNode クラスがあり、これを使用してさまざまな種類の vnod...

CSS3でカルーセル画像を作成する方法

スライドショーは Web ページでよく見られます。美しい写真が使われています。こちらは純粋な CSS...

ftp は SSH 経由で Linux にリモート接続します

まず Linux に ssh をインストールします。例として Centos を使用します。ポータル:...

MySQL クエリのパケットが大きすぎる問題と解決策

問題の説明:エラーメッセージ:原因: com.mysql.jdbc.PacketTooBigExce...

PhpStormがVirtualBoxに接続できない問題を解決する

問題の説明: phpstorm の SFTP ホストを 192.168.122.1 に設定すると、接...

XHTML言語のデフォルトCSSスタイル

html、アドレス、引用ブロック、本文、dd、div、 dl、dt、フィールドセット、フォーム、フレ...

フロントエンドJavaScriptのクラス

目次1. クラス1.1 コンストラクタ() 1.2 ゲッターとセッター1.3 これ1.4 静的プロパ...

HTMLのタグと要素の違いの詳細な説明

ウェブページに慣れていない友人の多くは私と同じように、HTML で要素、タグ、属性がどのように定義さ...

mysql ローカルログインでポート番号を使用してログインできない問題の解決策

最近、Linux を使用してローカルにログインしていたところ、正常にログインできず、次のエラー メッ...

CSSはコンテンツの高さが足りない場合にフッターを自動的に下部に固定します

UI カットのプロセスでは、ページはヘッダー、コンテンツ、フッターの 3 つの部分で構成されることが...

CSS3で実装されたグラデーションスライド効果

成果を達成する コードhtml <div class="css-slideshow&...

Vue の基本入門: Vuex のインストールと使用

目次1. vuexとは何か2. インストールと導入3. vuexの使用4. プロセスの紹介5. 突然...