vue中组件的data为什么是⼀个函数

前言

在学习vue的时候，⼀直纳闷⼀件事：组件的data数据为什么必须要以函数返回的形式，为什么不是简单的对象形式呢？遂带着问题去翻官⽅⽂档， ⽂档中⾃然也写明了这么做的原因，本篇博⽂以官⽅⽂档给出的原因为基础，并加上具体的例⼦，来阐述这么设计的原因。

正文

组件是可复⽤的vue实例，⼀个组件被创建好之后，就可能被⽤在各个地⽅，⽽组件不管被复⽤了多少次，组件中的data数据都应该是相互隔离，互 不影响的，基于这⼀理念，组件每复⽤⼀次，data数据就应该被复制⼀次，之后，当某⼀处复⽤的地⽅组件内data数据被改变时，其他复⽤地⽅组件 的data数据不受影响，如下⾯这个例⼦：

<template>
 <div class="title">
  <h1>按钮被点击了{{ count }}次</h1>
  <button v-on:click="count++">点击</button>
 </div>
</template>
<script>
 export default {
   name: 'BtnCount',
   data () {
     return {
       count: 0
     }
   }
 }
</script>
<style scoped>
 .title {
  background-color: red
 }
</style>

这样效果正是因为上述例⼦中的data不是⼀个单纯的对象，⽽是⼀个函数返回值的形式，所以每个组件实例可以维护⼀份被返回对象的独⽴拷 贝，如果我们将上述例⼦中的data修改为：

data : {
   count: 0
 }

会造成⽆论在哪个组件⾥改变了count值，都会影响到其他两个组件⾥的count。 这是因为当data如此定义后，这就表⽰所有的组件实例共⽤了⼀份data数据，因此，⽆论在哪个组件实例中修改了data,都会影响到所有的组件实例。

总结

组件中的data写成⼀个函数，数据以函数返回值形式定义，这样每复⽤⼀次组件，就会返回⼀份新的data，类似于给每个组件实例创建⼀个私有的数 据空间，让各个组件实例维护各⾃的数据。⽽单纯的写成对象形式，就使得所有组件实例共⽤了⼀份data，就会造成⼀个变了全都会变的结果。