Question

我正在阅读Vue components，并找到解释为什么数据需要有点混乱的原因：

根实例

var vm = new Vue({
  el: '#example',
  data: {
    message: 'here data is a property'
  }
})

组件

var vm = new Vue({
  el: '#example',
  data: function () {
     return {
       counter: 0
     }
  }
})

Vue文档通过为每个组件分配一个全局计数器变量来解释这种差异，然后他们感到惊讶的是每个组件共享相同的数据......他们也不解释为什么他们已经在这里使用了一个函数。

var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<div>{{ counter }}</div >',
  data: function () {
    return data  
  }
})

当然现在共享数据

<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>

当您引用全局对象作为数据源时，组件不具备自己的数据就不足为奇了。对于将数据作为属性的根Vue实例也是如此。

var mydata = { counter: 0 }

var vm1 = new Vue({
  el: '#example1',
  data: mydata
})

var vm2 = new Vue({
  el: '#example2',
  data: mydata
})

因此，我仍然留下了为什么组件无法拥有数据属性的问题？

Answer 1

根据我对此的理解，这是为了节省内存

许多框架，例如Angular 2或（有时）React，使组件的每个实例成为一个单独的对象。这意味着每个组件所需的一切都是针对每个组件进行初始化的。通常，您实际上只需要为每次初始化保持组件的数据分开。方法等保持不变。

Vue通过使数据成为返回对象的函数来避免陷阱。这允许单独的组件具有单独的内部状态，而无需完全重新实例化整个组件。方法，计算属性定义和生命周期钩子只创建并存储一次，并针对组件的每个实例运行。

See this

Answer 2

它必须是一个函数，因为其他数据将在组件的所有实例之间共享，因为对象是通过引用调用而不是按值调用。这不仅发生在引用全局对象时，也发生在数据是对象本身时。如果data是返回对象的工厂函数，则每次挂载组件的新实例时都会从头开始创建此对象，而不是仅仅将引用传递给全局数据。

Answer 3

由于Vue初始化数据时，

function initData(vm){

  let data = vm.$options.data

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

     Because here，data is a reference from vm.$options.data， 
     if data is an object, 
     when there are many instances of this Component,
     they all use the same `data`


      if data is a function, Vue will use method getData( a wrapper to executing data function, adds some error handling)

      and return a new object, this object just belongs to current vm you are initializing

    */

   ……


  // observing data
  observe(data, true)

}

为什么vue组件数据必须是函数？

3 个答案: