为什么Vue组件的data选项必须是一个函数

因为vue在initData的时候

 

function initData(vm){

 

  let data = vm.$options.data

  data = vm._data = typeof data === ‘function’ ? getData(data, vm) : data || {}

   /*

      因为在这里,data变量是从vm.$options.data引用来的, vm.$options.data就是你在定义这个组件时,传入的data

      如果data是一个对象的话,当有多个这个组件的实例时,

      这些多个组件在实例化时,都调用了这同一个对象,

      那么这个data的状态会共享在别的组件中,

     

      如果data是一个函数,vue会调用getData方法(执行这个传入函数,并添加一些trycatch处理)

      生成一个新的对象,这个对象只属于当前初始化的vm实例

      防止了data状态共享在别的组件中的情况

    */

   ……

 

  // 观察data

  observe(data, true)

}