コンポーネントのデータが関数である必要があるのはなぜですか？

公式ドキュメントの内容を見てみましょう
ここに画像の説明を挿入

公式ドキュメントが実際に表現したいのは、各コンポーネントに独自のデータを持たせることです
呼び出されるたびに新しいデータを返します
さまざまなコンポーネント間のデータが互いに影響を及ぼさないようにします

理解する

コード、

// 创建一个对象
  const obj = {
    
    
    name: '超人',
    age: 20
  }
// 通过这个函数分发
  function giveData() {
    
    
    return obj
  }
// 通过函数创建出来三个
  const obj1 = giveData()
  const obj2 = giveData()
  const obj3 = giveData()
// 打印出来看看
  console.log(obj1)
  console.log(obj2)
  console.log(obj3)

コンソールへの出力を見てください
ここに画像の説明を挿入
。何も間違っているが、
のがobjの内容を変更することができます。

この時点で、彼らがいることを確認するためにobj123印刷する

すべての3超人がダイアナとなっていることがわかります。これは、私たちが望む結果ではない、3人の男性は、3人の女性を退屈されています面白くない

実際、これは理解するのが難しくありません、メモリマップを描きましょう

ここに画像の説明を挿入
スーパーマンをダイアナに変更すると、3つすべてが同じメモリアドレスを持つため、すべての内容が変更されました

書き方を変えよう

  function giveData() {
    
    
    return {
    
    
      name: '超人',
      age: 20
    }
  }

  const obj1 = giveData()
  const obj2 = giveData()
  const obj3 = giveData()

  console.log(obj1)
  console.log(obj2)
  console.log(obj3)

コンソールの結果をもう一度見てください。
ここに画像の説明を挿入
前回と同じように見えます。変更してもう一度試してみてください

。そのうちの3つを見てください。

ここに画像の説明を挿入
いずれかのオブジェクトの名前属性のみが変更されており、楽しく再生できることがわかります

メモリマップをもう一度見てください

ここに画像の説明を挿入
これらの3つは、同じオブジェクトのクローンではなくなっていることがわかります。これらは、独自のメモリアドレスを持つ3つの独立した個体です。現時点では、1番目、2番目、3番目を変更します。変わらない
ここに画像の説明を挿入

上記がコンポーネント内のデータが関数でなければならない理由です

例を書いてみましょう

<body>
  <div id="app">
    <cpnson></cpnson>
    <cpnson></cpnson>
  </div>

  <template id="cpnson">
    <div>
      <h1>{
   
   {message}}</h1>
      <button @click='add'>点击变大</button>
    </div>
  </template>
</body>

  const cpnson = {
    
    
    template: "#cpnson",
    data() {
    
    
      return {
    
     message: 0 }
    },
    methods: {
    
    
      add() {
    
    
        this.message++
      }
    }
  }


  const app = new Vue({
    
    
    el: "#app",
    data: {
    
    },
    components: {
    
    
      cpnson,
    }
  })

ページの効果を確認し、
ここに画像の説明を挿入
クリックして試してください

コンポーネントのデータが関数ではない場合、複数のコンポーネントが同じデータを共有し、1つのコンポーネントのデータに加えられた変更は、他のコンポーネントのデータにも影響します。
コンポーネントのデータが関数である場合、コンポーネントがデータ内のデータを呼び出すたびに、それはデータの一意の関数によって返されるデータであるため、このコンポーネントはデータのデータを変更せず、他のコンポーネントはこのデータを使用しますコンポーネントはこのデータも変更します