为什么vue组件数据必须是一个函数?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么vue组件数据必须是一个函数?相关的知识,希望对你有一定的参考价值。

我正在阅读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
})

所以我仍然留下为什么组件不能拥有数据属性的问题?

答案

根据我对此的理解,这是为了节省记忆

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

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

See this

另一答案

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

另一答案

data选项应始终是返回新对象的组件上下文中的函数。

这种预防措施是由vue完成的。因此,无论何时直接在数据选项中定义对象,vue都会捕获错误。

永远不允许组件直接改变其状态。这可以防止我们在组件没有自己的状态时弄乱并做坏事。

如果这个预防措施不是由vue做出的,那么你将有机会改变从该组件拥有的任何其他组件,这将是一个安全问题。

来自documentation的示例:

很高兴理解为什么规则存在,所以让我们作弊。

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>
var data = { counter: 0 }

Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // data is technically a function, so Vue won't
  // complain, but we return the same object
  // reference for each component instance
  data: function () {
    return data
  }
})

new Vue({
  el: '#example-2'
})

由于所有三个组件实例共享同一个数据对象,因此递增一个计数器会增加所有这些数据对象哎哟。让我们通过返回一个新的数据对象来解决这个问题:

data: function () {
  return {
    counter: 0
  }
}

现在我们所有的计数器都有自己的内部状态。

以上是关于为什么vue组件数据必须是一个函数?的主要内容,如果未能解决你的问题,请参考以下文章

vue组件中为什么data必须是一个函数

vue组件中为什么data必须是一个函数

Vue组件为什么data必须是一个函数呢?本文案例详解

为什么vue组件中data必须是一个函数?

Vue 组件中data的类型为什么必须是函数

Vue 组件中data的类型为什么必须是函数