What is difference between ' data :' and ' data ()' in Vue. Js ?

在Vue.js中，data 属性用来定义组件的初始数据状态。不过，当我们在定义组件时使用 data，存在两种不同的方式：data: 和 data()，它们有着重要的区别。

1. data: 使用对象直接量

当你使用 data: 并直接赋予一个对象时，例如：

javascript
data: {
    count: 0
}

这种方式的问题在于，这个对象会在所有此组件的实例之间共享。也就是说，如果你创建了多个实例，它们都会共享同一个 data 对象。这在大多数情况下是不期望的，因为通常我们希望每个组件实例都维护自己的独立状态。

2. data() 使用函数

为了解决这个共享状态问题，Vue 推荐在定义组件时，将 data 定义为一个函数，这样每个组件实例可以维护一份被返回对象的独立拷贝。例如：

javascript
data() {
    return {
        count: 0
    }
}

每次创建一个新的组件实例时，都会调用 data() 函数，从而返回一个新的 data 对象。这样，每个组件实例都有其自己的独立 data 对象，互不影响。

实际应用示例

假设我们有一个简单的计数器组件：

vue
<template>
  <div>
    <button @click="count++">Increment</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

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

如果我们在同一个父组件中使用这个计数器组件多次，每个计数器按钮的点击只会影响其自己的 count 状态，而不会影响其他计数器组件的状态。这是因为每个计数器组件都通过 data() 函数获取了自己独立的数据对象。

总结，使用 data() 函数是Vue推荐的方式，以确保每个组件实例都拥有自己的独立的数据状态，这在实际开发中非常重要，尤其是在组件被复用时。