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是学习框架原理的基础！