Vue组件中的data必须是一个function的原因浅析

Vue组件中的data必须是一个function的原因主要是因为Javascript中的对象和数组都是引用类型，如果直接把这些引用类型数据直接赋给组件实例的data属性，那么修改其中一个组件实例的数据时，会影响其它实例的数据。使用函数返回一个新对象可以确保每个组件实例都有自己独立的数据。

以下是两个示例：

示例1

<template>
  <div>{{ count }}</div>
  <button @click="increment">{{ name }} Count +</button>
</template>

<script>
  export default {
    data: {
      count: 0
    },
    props: {
      name: {
        type: String,
        required: true
      }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

上面的代码中，data属性的值是一个对象，而不是函数，这会导致组件实例之间共享同一个数据源，当修改其中一个实例的数据时，所有实例的数据都会被修改。

以下是改用函数返回新对象的示例2：

示例2

<template>
  <div>{{ count }}</div>
  <button @click="increment">{{ name }} Count +</button>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    props: {
      name: {
        type: String,
        required: true
      }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

以上示例中，data属性的值是一个函数，该函数会返回一个新对象，这样每个组件实例都有自己独立的数据源，即使其中一个组件实例的数据被修改，其它组件实例的数据也不会受到影响。