Vue的data为啥只能是函数原理详解

Vue的data中为什么只能是函数呢？这是一个常见的Vue面试题，其主要原因是为了保证每个Vue组件实例都有一个独立的数据对象，在多个组件实例中互不干扰。

具体来说，当一个组件实例化时，如果data选项是一个对象，那么这个对象会被所有这个组件的实例共享，这样就会导致一个实例修改了data中的值，其他实例中的值也会发生改变，这样就无法实现组件复用了。

而当我们将data改为一个函数时，每次实例化组件都会调用一次这个函数，这样每个实例都可以获得一个独立的数据对象，从而实现数据的独立性。

下面我们通过两个示例来说明data为函数的原理：

示例1：

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data: {
    count: 0
  }
}
</script>

在这个示例中，我们定义了一个简单的组件，其data选项中包含一个count属性。如果我们在页面中使用该组件，会发现页面上显示的count值始终为0。这是由于每个组件实例都共享了data选项中的同一个对象，所以当一个组件实例修改了count的值时，其他实例中的count值也会发生改变，导致页面上所有count的值都变为了修改后的值。这种情况显然不是我们想要的。

示例2：

<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

在这个示例中，我们将data改为一个函数，并在函数中返回一个包含count属性的对象。如果我们在页面中使用该组件，会发现每个组件实例都有一个独立的count属性，修改其中一个实例中count的值不会影响到其他实例中的值。这是由于每个实例在调用data函数时都会获得一个独立的数据对象，从而实现了数据的独立性。

综上所述，将data定义为函数，可以保证每个Vue组件实例都有一个独立的数据对象，从而实现数据的独立性。