vue組件中data爲什麼是一個函數？

vue2.X組件中data爲什麼是一個函數？曾經的困惑，今天我就好好總結一下。
在vue實例上data定義的是一個對象：

new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

但是在vue組件中data定義的是一個函數

// 定義一個名爲 button-counter 的新組件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

解答：
當data是一個對象時，我們知道object類型是引用類型，data是一個指針，指向對象在堆內存中存儲的地址。

如果組件中的data也是一個對象，那麼在組件進行復用的時候，相當於這些組件共用的是一個data，一個組件中的data數據改變了，那麼其他複用組件的數據也會跟着改變。這就降低了組件複用性和靈活性。

那爲什麼把組件中的data設置爲一個函數呢？
我們知道作用域分爲全局作用域、局部作用域（函數作用域）、塊級作用域（es6）。
組件中的data設置爲一個函數，相當於每個組件實例都有自己的作用域，那麼局部作用域中的數據改變是不會影響其他作用域的，也就是說每個組件相互獨立，互不影響。這樣就保證了組件的複用性和靈活性。

萬變不離其宗，掌握好js是學習框架原理的基礎！