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

以下もご興味があるかもしれません: