ホームページ ウェブフロントエンド フロントエンドQ&A vue 内のデータがデータを返すために return を使用する必要があるのはなぜですか?

vue 内のデータがデータを返すために return を使用する必要があるのはなぜですか?

Jan 10, 2022 pm 03:26 PM
data return vue

理由: return でラップされていないデータはプロジェクト内でグローバルに表示されるため、変数汚染が発生します。return ラップを使用している間、データ内の変数は現在のコンポーネントでのみ有効になり、有効にはなりません。他のコンポーネントに影響を与えます。

vue 内のデータがデータを返すために return を使用する必要があるのはなぜですか?

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

公式:
コンポーネントを定義するとき、コンポーネントは複数のインスタンスの作成に使用される可能性があるため、データは初期データ オブジェクトを返す関数として宣言される必要があります。 。 data
が依然として純粋なオブジェクトである場合、すべてのインスタンスは同じデータ オブジェクトへの参照を共有します。 data 関数を提供すると、新しいインスタンスが作成されるたびに data
関数を呼び出すことができるため、元のデータ オブジェクトの新しいコピーが返されます。

プロジェクトでデータを返すためにデータが return を使用する必要があるのはなぜですか?

  • return でラップされていないデータはプロジェクト内でグローバルに表示されるため、変数汚染が発生します。return を使用した後は、データ内の変数が有効になるのは現在のコンポーネントに適用され、他のコンポーネントには影響しません。

    コンポーネントは複数のインスタンスの作成に使用される可能性があるため、コンポーネントを定義するときは、データを初期データ オブジェクトを返す関数として宣言する必要があります。 data
    が依然として純粋なオブジェクトである場合、すべてのインスタンスは同じデータ オブジェクトへの参照を共有します。データ関数を提供すると、新しいインスタンスが作成されるたびにデータ関数を呼び出すことができるため、元のデータ オブジェクトの完全に新しいコピーが返されます。

アナログおよび参照データ型。関数 return を使用しない場合、各コンポーネントのデータはメモリ内の同じアドレスになります。一方のデータが変更されると、他方のデータも変更されます。これは当然ながら望ましくないことです。 function return を使用することは、実際には互いに独立した新しい変数を宣言することに相当しますが、当然そのような問題は発生せず、js がオブジェクト object を代入するときに同じメモリ アドレスを直接使用します。そこで、各コンポーネントのデータを独立させるために、このような方法を採用しています。
コンポーネントではない場合、通常のデータ書き込みメソッドでオブジェクトを直接書き込むことができます。たとえば、同じコンポーネント内の 2 つの計算機がデータを共有します: {num: 0}。JS でオブジェクトを直接共有すると、参照転送が発生します。は、プラスボタンとマイナスボタンを押した後にすべての数値が変更されると言われているので、ここでは関数を使用して毎回オブジェクトインスタンスを返します。

[関連する推奨事項: vue.js チュートリアル]

以上がvue 内のデータがデータを返すために return を使用する必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

vueでechartを使用する方法 vueでechartを使用する方法 May 09, 2024 pm 04:24 PM

vueでechartを使用する方法

vue におけるエクスポートのデフォルトの役割 vue におけるエクスポートのデフォルトの役割 May 09, 2024 pm 06:48 PM

vue におけるエクスポートのデフォルトの役割

vueでのmap関数の使い方 vueでのmap関数の使い方 May 09, 2024 pm 06:54 PM

vueでのmap関数の使い方

vueのeventと$eventの違い vueのeventと$eventの違い May 08, 2024 pm 04:42 PM

vueのeventと$eventの違い

Vue における onmounted の役割 Vue における onmounted の役割 May 09, 2024 pm 02:51 PM

Vue における onmounted の役割

vueのエクスポートとデフォルトのエクスポートの違い vueのエクスポートとデフォルトのエクスポートの違い May 08, 2024 pm 05:27 PM

vueのエクスポートとデフォルトのエクスポートの違い

vue の onmounted は、react のどのライフサイクルに対応しますか vue の onmounted は、react のどのライフサイクルに対応しますか May 09, 2024 pm 01:42 PM

vue の onmounted は、react のどのライフサイクルに対応しますか

Vueのフックとは何ですか Vueのフックとは何ですか May 09, 2024 pm 06:33 PM

Vueのフックとは何ですか

See all articles