详解Vue的组件中data选项为什么必须是函数

Vue.js官方文档中规定了一个重要的规则：在Vue组件中，data选项必须是函数。

为什么data选项必须是函数？

从根本上来说，这是因为JavaScript中对象和数组是引用类型，如果在组件中直接使用一个变量作为data，则它在所有实例之间共享，一旦该变量的值被修改，则所有的实例都会受到影响。

因此，为了确保每个组件实例都有自己的私有数据，并且不受其他组件的影响，我们必须将该数据定义为一个函数，该函数返回一个新的对象或数组。

示例1：data作为对象

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加计数</button>
  </div>
</template>

<script>
  export default {
    // data选项是一个函数
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

在上面的示例中，我们在组件的data选项中定义了一个count属性，它的初始值为0。由于我们将data定义为一个函数并在里面返回一个新的对象，因此每个实例都将具有一个独立的count属性，互不干扰。

示例2：data作为函数

<template>
  <div>
    <input v-model="username" placeholder="请输入用户名">
    <button @click="login">登录</button>
  </div>
</template>

<script>
  export default {
    // data选项是一个函数
    data() {
      return {
        username: ''
      };
    },
    methods: {
      login() {
        alert('你输入的用户名是：' + this.username);
      }
    }
  }
</script>

在上面的示例中，我们在组件的data选项中定义了一个username属性，它的初始值是空字符串。由于我们将data定义为一个函数并在里面返回一个新的对象，因此每个实例都将具有一个独立的username属性，不受其他实例的影响。