正文

为什么vue组件数据必须是一个函数？(代码片段)

author  author  2022-12-28  564

关键词：

我正在阅读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]组件的data必须是一个函数(代码片段)

普通的Vue实例data是一个对象：data:count:0组件的data是一个方法：data:function()returncount:0详情见官网：https://cn.vuejs.org/v2/guide/components.html 查看详情

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

如果组件中data不是一个函数，首先vue是会报错的，因为它的内部规范组件中的data必须是个函数，组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染，采用函... 查看详情

vue中的data为什么是一个函数(代码片段)

首先：组件是一个可复用的Vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用多少次，组件中data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次... 查看详情

vue组件(代码片段)

...复用的vue实例，它的特点是独立、可复用且整体化。　　为什么要组件化：为了实现功能模块的复用，高执行率，便于开发单页面复杂应用。　　组件化带来的问题：组件状态管理（vuex）；　　　　　　　　　　　多组件的混... 查看详情

vue中的data为什么是一个函数？起到什么作用？(代码片段)

...时候，我们一直在思考的一件事：组件的data数据为什么必须要以函数返回的形式，为什么不是简单的对象形式呢？一.data为什么是一个函数面试回答:如果data是一个函数的话，这样每复用一次组件，就会返... 查看详情

vue之组件(代码片段)

组件基础:组件是可复用的Vue实例,且带有一个名字. 因为组件是可以复用的Vue实例,所以它们与newVue接收相同的选项,例如:data,computed,watch,methods以及生命周期钩子等.仅有的例外是像el这样根实例特有的选项.注意事项:　　data必须... 查看详情

vue——组件(代码片段)

　　vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。1、data必须是一个函数定义这个<button-counter>组件时，你可能会发现它的da... 查看详情

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

在函数内声明实例属性保存data，每个实例对象的data都是经过一次函数执行得到有不同的返回结果，所以返回data的值具有自己独立的作用域。在定义Vue实例时，给Vue传参是一个对象，对象中data就是一个函数，Vue在实例化的时候... 查看详情

组件中data为什么是一个函数？(代码片段)

如果两个实例引用同一个对象，当其中一个实例的属性发生改变时，另一个实例属性也随之改变,对象没有自己的作用域，只有当两个实例拥有自己的作用域时，才不会相互干扰。这是因为JavaScript的特性所导致，在component中... 查看详情

组件可以访问vue实例数据吗

...函数，而且这个函数返回一个对象，对象内部保存着数据为什么组件data属性必须是函数写成函数形式：如果复用组件的话，它们并不是共用同一个对象，每次调用组件的时候都会data属性都会renturn一个新的对象，函数在每次执行... 查看详情

vue实例的选项有哪些(代码片段)

...E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE1.data类型：Object|Function限制：组件的定义只接受function详细：Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个... 查看详情

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

vue组件中data值不能为对象，因为对象为引用类型，组件可能被多个实例同时引用。如果data值是对象，将导致多少实例公用一个对象，其中一个组件改变data属性值，其他实例也会送到影响。查看详情

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

vue-封装一个弹出层组件（组件之间的通信）(代码片段)

...有一个他的新的实例被创建。data必须是一个函数？他为什么是一个函数呢？首先vue组件是用来复用的，且组件之间是引用关系，如果组件中的data不是一个函数的话，那么他的子组件的实例就不是一个独立的拷... 查看详情

vue基础（下篇）(代码片段)

介绍对vue组件的介绍网上有很多大家可以自行查询组件(Component)是Vue.js最强大的功能之一组件可以扩展HTML元素，封装可重用的代组件注册全局注册Vue.component(‘组件名称’,)第1个参数是标签名称，第2个参数是一个选项对... 查看详情

vue组件化开发(代码片段)

全局组件注册Vue.component(‘first-component‘,data:function()returncount:0,template:‘<button@click="count++">count</button>‘)data必须是一个函数组件模板内容必须是单个根元素组件模板内容可以是模板字符串全局组件可以嵌套全局... 查看详情

你应该要知道的vue.js(代码片段)

...ue都不了解，所以整理了问的比较多的问题。组件data为什么必须是函数？因为组件可能被多处使用，但它们的data是私有的，所以每个组件都要return一个新的data对象，如果共享data，修改其中一个会影响其他组件组件通信父子... 查看详情

vue:组件(代码片段)

组件是可复用的Vue实例，且带有一个名字我们可以在一个通过 newVue 创建的Vue根实例中，把这个组件作为自定义元素来使用：-data必须是函数-没有el属性全局组件,不用注册<divid="app"><zujianming><... 查看详情