前言

大晚上室友突然问了我这样一个问题，组件中的data为什么要写成一个函数，data中的数据不是双向绑定的吗，我们需要的不就是他的这个特性吗？为什么不能直接写成对象形式，这不是多此一举吗。nonono，此举大有用处。

使用函数的理由

1、组件是用来复用的，组件中的data写成一个函数，数据就会以函数返回值的形式定义，函数有独立的作用域，这样每次复用一次组件，就会返回一份新的data，类似于给每个组件实例创建了一个私有的数据空间，让各个组件实例维护各自的数据，互不干扰。
2、如果单纯的写成对象形式，由于对象是引用类型，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

实操测试一下

组件CartTest.vue,这是一个简易版的购物车加减步进器组件，data中定义了一个count数据，用于表示购买的数量，通过input框中使用:value="count"进行双向绑定。

<template>
  <div>
    <button @click="reduce">-</button>
    <input type="text" :value="count">
    <button @click="add">+</button>
  </div>
</template>

<script>
export default {
  name:'test-page',
  data(){
    return{
      count:1
    }
  },
  methods:{
    add(){
      this.count++
    },
    reduce(){
      this.count--
    }
  }
}
</script>

在app.vue里面同时复用两次这个组件

<template>
<div>
  <CartTest></CartTest> //一次
  <CartTest></CartTest> //两次
</div>
</template>

<script>
import CartTest from './components/CartTest.vue'
export default {
components:{
  CartTest
}
}
</script>

运行结果：

点击第一个步进器组件的加号按钮，第一个步进器中属于他的data内的count就会+1，而不会影响到第二个步进器内的data中的count。如图所示：

第一个组件内的count是9：

第二个组件内的count仍然是1：

总结

如果new vue中的代码不存在复用的情况，则可以直接写成对象形式，如果是多次复用的组件，则data需要写成函数的形式。

关于组件中的data为什么是函数，你真的理解了吗？

前言

使用函数的理由

实操测试一下

总结