vue中data為什么是函數而不是對象

vue組件是可復用的vue實例，一個組件被創建好之后，就可能被用在各個地方，而組件不管被復用了多少次，組件中的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>

結果：

 

 總結：如果data是對象的話，每當被復用是，復用的對象和源對象都會指向同一個內存地址（淺拷貝），互相之間相互影響，所以要是函數