なぜコンポーネントデータを関数にする必要がありますか？

Question

私はVue components上に読み取り、データがやや紛らわしい機能にする必要がある理由のその説明を見つけています：

ルート・インスタンス

var vm = new Vue({ 
    el: '#example', 
    data: { 
    message: 'here data is a property' 
    } 
}) 

コンポーネント

var vm = new Vue({ 
    el: '#example', 
    data: function() { 
    return { 
     counter: 0 
    } 
    } 
}) 

Vueのドキュメントでは、グローバルなカウンタ変数を各コンポーネントに割り当て、それぞれのコンポーネントが同じデータを共有していることに驚かされました...また、彼らはなぜここで関数を使用しているのかを説明しません。

var data = { counter: 0 } 

Vue.component('simple-counter', { 
    template: '<div>{{ counter }}</div >', 
    data: function() { 
    return data 
    } 
}) 

データは、現在共有されているもちろん

<simple-counter></simple-counter> 
<simple-counter></simple-counter> 
<simple-counter></simple-counter> 

あなたのデータソースとしてグローバルオブジェクトを参照するとき、それはコンポーネントが自分のデータを持っていないことは驚きではありません。これは、データをプロパティとして持つルートVueインスタンスにも当てはまります。

var mydata = { counter: 0 } 

var vm1 = new Vue({ 
    el: '#example1', 
    data: mydata 
}) 

var vm2 = new Vue({ 
    el: '#example2', 
    data: mydata 
}) 

なぜ、コンポーネントがデータプロパティを持つことができないのかという疑問が残っていますか？

Answer 1

本の私の理解から、それは（時々）メモリに、このような角度2や、など

多くのフレームワークを、保存するように反応するのです、コンポーネント別のオブジェクトの各インスタンスを作ります。これは、各コンポーネントに必要なすべてがすべてのコンポーネントに対して初期化されることを意味します。通常は、初期化ごとにコンポーネントのデータを分けておくだけです。方法などは同じです。

Vueは、データをオブジェクトを返す関数にすることでその落とし穴を回避します。これにより、コンポーネント全体を完全に再インスタンス化する必要なく、別々のコンポーネントが個別の内部状態を持つことができます。メソッド、計算されたプロパティ定義、およびライフサイクルフックは、一度だけ作成され、格納され、コンポーネントのすべてのインスタンスに対して実行されます。

See this

Answer 2

オブジェクトが基準よりもむしろ値による呼び出しによってコールされているようotherwhiseデータは、コンポーネントのすべてのインスタンス間で共有されるので、それは関数でなければなりません。これは、グローバルオブジェクトを参照するときだけでなく、データ自体がオブジェクトであるときにも発生します。 データがオブジェクトを返すファクトリ関数である場合、このオブジェクトは、グローバルデータへの参照を渡すのではなく、コンポーネントの新しいインスタンスをマウントするたびにゼロから作成されます。

Answer 3

データオプションは、常に新しいオブジェクトを返すコンポーネントのコンテキスト内の関数である必要があります。

この注意はvueによって行われています。したがって、データオプションでオブジェクトを直接定義すると、vueは間違いを犯すことになります。

コンポーネントの状態が直接変更されることは決してありません。これは、コンポーネントが自分の状態を持たない、悪いことをやり乱すのを防ぎます。

vueがこの予防措置を講じていない場合、コンポーネントから所有している他のコンポーネントを突然変異させる可能性があります。これはセキュリティの問題になります。 documentationから

例：

それはルールがが存在する理由を理解し、その者がカンニングさせて良いことです。

<div id="example-2"> 
    <simple-counter></simple-counter> 
    <simple-counter></simple-counter> 
    <simple-counter></simple-counter> 
</div> 
var data = { counter: 0 } 

Vue.component('simple-counter', { 
    template: '<button v-on:click="counter += 1">{{ counter }}</button>', 
    // data is technically a function, so Vue won't 
    // complain, but we return the same object 
    // reference for each component instance 
    data: function() { 
    return data 
    } 
}) 

new Vue({ 
    el: '#example-2' 
}) 

3つのコンポーネントインスタンスがすべて同じデータオブジェクトを共有するため、1つのカウンタを増やすとすべてが増えます。ああ。

data: function() { 
    return { 
    counter: 0 
    } 
} 

ここで、すべてのカウンタはそれぞれ独自の内部状態を持っています。