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

 

阅读目录

• 1. 前言
• 2.正文
• 3.总结

---

回到顶部

1. 前言

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

回到顶部

2.正文

组件是可复用的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>

该组件被复用了三次，但每个复用的地方组件内的count数据相互不受影响，它们各自维护各自内部的count。

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

data : {
   count: 0
 }

那么就会造成无论在哪个组件里改变了count值，都会影响到其他两个组件里的count。

这是因为当data如此定义后，这就表示所有的组件实例共用了一份data数据，因此，无论在哪个组件实例中修改了data,都会影响到所有的组件实例。

回到顶部

3.总结

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