为何组件的data必须是一个函数

最新推荐文章于 2022-10-26 17:07:31 发布
最新推荐文章于 2022-10-26 17:07:31 发布
阅读量124 收藏
点赞数
分类专栏： 面试题总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FengYang_/article/details/109283785
版权

为何组件的data必须是一个函数

首先定义的 xx.vue文件在编译之后是一个类，每个地方使用这个组件的时候，相当于对这个类实例化，在实例化的时候执行data，如果不是一个函数的话，每个组件的实例的data都是同一个引用数据，当该组件作为公共组件共享使用，一个地方的data更改，所有的data一起改变。如果data是一个函数，每个实例的data都在闭包当中，就不会各自影响了

简单来说就是：
因为vue是可复用组件，如果data不是一个函数，那么在一个组件中修改数据会造成所有组件中数据都会改变，很容易造成全局污染

刚上道的小白_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件为什么data必须是一个函数
10-15
这就是Vue组件中`data`必须是一个函数的原因，也是JavaScript原型链特性的应用。理解这一概念对于编写可复用和可维护的Vue组件至关重要。因此，无论是在Vue还是其他JavaScript框架中，掌握好基础知识对解决实际问题...
详解Vue的组件中data选项为什么必须是函数
10-14
总之，Vue组件中的`data`选项必须是一个函数，是为了避免组件实例间的数据共享，确保每个实例都有独立的状态，从而保持组件的封装性和数据安全性。理解这一设计背后的原理对于编写可维护、可扩展的Vue应用至关重要。...
为什么组件data必须是一个函数
weixin_50407990的博客
12-31 571
总结： 首先定义的xx.vue文件在编译之后是一个类，每个地方使用这个组件的时候，相当于对这个类实例化，在实例化的时候执行data，如果不是一个函数的话，每个组件的实例的data都是同一个引用数据，当该组件作为公共组价共享使用，一个地方的data更改，所有的data一起改变。如果data是一个函数，每个实例的data都在闭包当中，就不会各自影响了 自己的话就是：** 因为闭包的特性 不想不影响各自的数据 不回因为是公共组件就被影响 ** ...
组件中的data为什么必须是函数？
yijiujiuqi的博客
10-08 153
因为组件可能会被多个实例同时引用，如果data的值为对象，将使得多个实例共享一个对象，当我们修改其中一个组件改变data属性值，其它实例也会受到影响，这显然不是我们想要的结果
为什么组件data必须是函数？
零碎@流年絮语 的博客
01-28 164
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script&
为什么组件的data必须是一个函数 而不能是对象
最新发布
07-12
组件的data选项必须是一个函数而不是一个对象，是因为Vue组件的data选项是用来定义组件的初始数据的。当组件被复用多次时，如果data选项是一个对象，那么所有的组件实例将共享同一个对象，这样会导致一个组件的状态...
组件中的data为什么是个函数？
向着太阳迎着光
10-26 2707
组件中的data为什么是函数，而不是对象呢？我们带着问题去思考？如果组件中的data写成一个对象，这些实例使用的是同一个构造函数，但是由于JavaScript特性所导致，所有的组件实例对象当中，共用的是同一个data，就会形成当一个数据变更的时候，会导致所有的都跟着变。
为何组件中的data必须是一个函数
weixin_55869781的博客
04-29 322
理解这个问题，我们先看一个报错 警告说明：返回的data应该是一个函数在每一个组件实例中 我们继续看： 在vue实例上data定义的是一个对象，也可以是一个函数： var app = new Vue({ el:"#app", // 对象格式 data:{ foo:"foo" }, // 函数格式 data(){ return { foo:"foo" } } }) 但是在vue
组件中的data必须是一个函数
u013158317的博客
04-19 275
在Vue的组件基础中有这样一句话：data必须是一个函数。 为什么data必须是一个函数呢？ 我们来看Vue在声明式渲染中给出的一个demo： <div id="app">{{ message }}</div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }}) 在这...
vue组件中data为什么必须是函数？
JIAFury的博客
01-13 302
data组件是vue的实例 组件共享data属性，当data的值是同一个引用类型的值时，改变其中一个会影响其他 组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据，而单纯的写成对象形式，就会使所有组件实例共用了一份data，就会造成一个变了全都会变得结果。 ...
Vue 组件 data 为什么必须是函数
Qiemo_的博客
05-16 1121
1.每个组件都是 Vue 的实例 2、组件共享data属性,当data的值是同一个引用类型的值时,改变 其中一个会影响其他 3、组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据.而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果 ...
vue组件中data为什么必须是一个函数
五颜六色的白
07-04 703
当一个**组件**被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。 如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify...
Vue 组件中的data为什么必须是函数
qq_26642611的博客
12-24 254
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，写成函数，函数有自己的作用域，不会相互影响。 否则，两个实例组件对象的data是一模一样的，个改变也会导致另一个改变，这在实际开发中是不符合组件式思想的。 应该如下使用： data() { return { count: 0 } } ...
Vue组件中data选项为什么必须是函数
heartOfblack 离开了电脑，我不希望我还有病
10-28 4842
官方解释 data 必须是函数 构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数。实际上，如果你这么做： Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message: 'hello' } }) 那么
vue的组件中为什么data必须是一个函数？
kzj0916的博客
08-16 2823
组件中为什么data必须是一个函数 如果不是函数 如果组件中的data不是一个函数，首先vue是会报错的，因为它内部规范组件中的data必须是个函数。 那为什么必须是个函数呢？大家接着看看 既然它要求返回一个对象，那我们定义一个对象再给他返回行不行呢？ 而此时点击也有用功能也能实现 但是，当我们需要对此使用此组件时 我们可以发现，此时组件的数据是共享的，一个改变，其他也改变，很显然，我们开发组件就是希望使用时能自己的数据不和其他组件进行共享，这样很容易污染变量，造成数据紊乱。 正确做法 我们让d
为什么组件中的data必须是一个函数？
m0_47883103的博客
08-29 3626
先看一下官方文档是怎么说的 官方文档其实想表达的意思是，让每一个组件都有自己的数据 每次调用的时候都会return一个新的数据 让各个组件之间的数据不会相互影响 理解一下 上代码， // 创建一个对象 const obj = { name: '超人', age: 20 } // 通过这个函数分发 function giveData() { return obj } // 通过函数创建出来三个 const obj1 = giveData() const o
框架篇-Vue面试题1-为什么 vue 组件中的 data 是函数而不是对象
itclanCoder
09-24 618
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知...
Vue的组件data为什么必须是一个函数
05-12
在Vue中，组件的data选项必须是一个函数，而不能是一个对象。这是因为在Vue中，组件是可以被复用多次的，如果使用一个对象作为data选项，那么所有的实例都会共享这个对象，这样就会造成数据的混乱。 使用一个函数作为data选项，每次创建一个组件实例时，都会调用这个函数，返回一个新的对象作为这个实例的data，这样每个实例都有自己独立的数据，不会相互影响。 另外，由于组件实例可以被复用多次，如果data选项是一个对象，那么在不同的组件实例中，这个对象的引用是相同的，这样在一个实例中修改了data中的数据，会影响到其他实例中的数据，导致数据错乱。而使用函数返回新的对象，每个实例都有自己独立的数据对象，就不会有这个问题了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值