vue中data为什么是函数而不是对象

vue组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的.

基于这一理念，组件每复用一次，data数据就会被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。

总结：如果data是对象的话，每当被复用是，复用的对象和源对象都会指向同一个内存地址（浅拷贝），互相之间相互影响，所以要是函数

1、函数

<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>

 

 2、对象

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

 

vue的data数据其实是vue原型上的属性，数据存在于内存当中。vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。

因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的，这就不是我们想要的了。对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。

以上两个实例都引用同一个对象，当其中一个实例属性改变时，另一个实例属性也随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰。

为什么使用函数不会有这种问题

使用函数后，使用的是data()函数，data()函数中的this指向的是当前实例本身。