vueコンポーネント内のデータは関数にできないのでしょうか？

いいえ、vue コンポーネント内のデータは関数である必要があります。 Vue のコンポーネントは再利用するために使用されますが、データの再利用を防ぐために関数として定義されます。 vueコンポーネント内のデータデータは互いに分離されており、相互に影響を及ぼさないようにする必要があります。コンポーネントを再利用するたびに、一度データデータをコピーします。その後、再利用された場所でコンポーネント内のデータデータが変更される場合、再利用したローカルコンポーネントのデータに影響を与えない場合は、data 関数を通じてコン​​ポーネントの状態としてオブジェクトを返す必要があります。

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

vue インスタンスを定義する場合、データ属性はオブジェクトまたは関数のいずれかにすることができます

const app = new Vue({
    el:"#app",
    // 对象格式
    data:{
        foo:"foo"
    },
    // 函数格式
    data(){
        return {
             foo:"foo"
        }
    }
})

ただし、

コンポーネントで定義されるデータ属性は関数のみにすることができます

コンポーネント データがオブジェクトとして直接定義されている場合は、

Vue.component('component1',{
    template:`<div>组件</div>`,
    data:{
        foo:"foo"
    }
})

、警告メッセージが表示されます

警告の説明: 返されたデータは各コンポーネント インスタンスの関数である必要があります。

データ属性がオブジェクトではなく関数であるのはなぜですか?

Vue コンポーネントのデータ属性をオブジェクトにすることはできません。その理由は、オブジェクトが参照型であるためです。コンポーネントは複数のインスタンスによって同時に参照されます。結果複数のインスタンスが 1 つのオブジェクトを共有し、コンポーネントの 1 つが変更されるということです。データ オブジェクトの値が削除されると、他のインスタンスも影響を受けます。

#図に示すように、コンポーネントが再利用された後、コンポーネントの 1 つのボタンをランダムにクリックすると、他の 2 つのコンポーネントの値にも影響します。

vue コンポーネントのデータが関数である理由: データは関数であり、オブジェクトを返すことによって、各インスタンスは独自の独立したオブジェクトを持つことができ、インスタンスは相互に影響を与えません; 以下の図に示すように

結論

ルート インスタンスのオブジェクト データは、オブジェクトまたは関数になります (ルート インスタンスは

コンポーネント インスタンス オブジェクトのデータは関数である必要があります。目的は、複数のコンポーネント インスタンス オブジェクトが同じデータを共有してデータ汚染を引き起こすことを防ぐことです。関数の形式では、initData が新しいデータ オブジェクトを返すときにファクトリ関数として使用されます。

説明:

vue のコンポーネントは再利用可能ですが、データの再利用を防ぐために関数として定義します。

• vue コンポーネント内のデータは互いに分離され、相互に影響を及ぼさないようにする必要があります。コンポーネントを再利用するたびに、データ データを 1 回コピーする必要があります。ある場所を再利用する 使用しているローカルコンポーネントのデータデータが変更されても、他の再利用ローカルコンポーネントのデータデータには影響しないため、data関数を通じてコン​​ポーネントの状態としてオブジェクトを返す必要があります。

• コンポーネント内のデータを関数として記述すると、データは関数の戻り値の形式で定義されるため、コンポーネントが再利用されるたびに新しいデータが生成されます。独自のスコープを持つ返されることは、コンポーネント インスタンスごとにプライベート データ スペースを作成することに似ており、各コンポーネント インスタンスが独自のデータを維持できるようになります。

• コンポーネントの日付を単純にオブジェクト形式で記述すると、これらのインスタンスは同じコンストラクターを使用しますが、JavaScriptの特性上、すべてのコンポーネントインスタンスは1つのデータを共有するため、すべてを変える結果に。

• (学習ビデオ共有:
Web フロントエンド開発

、

基本プログラミング ビデオ)

以上がvueコンポーネント内のデータは関数にできないのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。