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エスケープシーケンス

推薦する

VMWare を使用して Windows 上で Linux 環境を構築する手順 (画像とテキスト)

Mac を返却して以来、元のラップトップは使用されていません。このラップトップの構成は非常に良好で...

Webフロントエンドツール、Sublime Text 2の紹介

Sublime Text 2 は、軽量でシンプル、効率的なクロスプラットフォーム エディターです。ブ...

フロントエンドが習得すべき、複数列の等高レイアウトを実現するための CSS テクニック

1. はじめにページを作成しているときに、複数列のレイアウトに遭遇することがあります。各列の内容が異...

テーブルのネストと境界の結合の問題に対する解決策

【質問】外側のテーブルと内側のテーブルがネストされていて、内側のテーブルと外側のテーブルの両方に境界...

マウスをホバーすると画像が折りたたまれる効果を実現する CSS

マウスをホバーすると画像が折りたたまれる効果を実現する CSS 1. 実施のポイント折り畳みは複数の...

デザイン理論: テキストの読みやすさと可読性

<br />少し前に、ビジネス上の必要性から、ラップトップに Souba をインストール...

Windows 10 での MySQL 5.7.19 インストール チュートリアル MySQL のルート パスワードを忘れた場合の変更方法

MySQL 5.7.19のインストールを例に挙げると、まずダウンロードしますもちろん、最初に行うこと...

人気の宇宙飛行士ウォッチフェイスをJavaScriptで実装するための完全なコード

1. エフェクト表示JavaScript で書かれた宇宙飛行士のウォッチフェイス。 http://x...

CSS を使用して、画像に 3D の凸型と凹型のエフェクト (フレーム外に凸型、またはフレーム内に凹型) を実現します。

Ⅰ. 問題の説明: CSS を使用して画像の 3D 凸凹効果を実現します。 Ⅱ実施手順は以下のとお...

vue3.0共通コンポーネントの自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

検証例 MySQL | 同じ値を持つフィールドを更新すると、binlog に記録されます

1. はじめに数日前、開発仲間から、フィールドを同じ値に更新すると binlog が記録されるかどう...

Linux でメモリ使用量を確認する方法

システムの問題、アプリケーションの速度低下、または原因不明の問題をトラブルシューティングする場合、最...

動的なセカンダリメニューを実現するためのCSS

シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...

SQLデータベースの14の事例の紹介

データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...

MySQL インデックスの長所と短所、およびインデックス作成のガイドライン

1. インデックスを作成する理由(メリット)インデックスを作成するとシステムのパフォーマンスが大幅に...