Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制？

最新推荐文章于 2022-03-24 09:39:42 发布
最新推荐文章于 2022-03-24 09:39:42 发布
阅读量1k 收藏 2
点赞数 3
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44116302/article/details/104072272
版权

Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制？

基本知识了解

在解答这个问题之前，需要了解js的数据类型，即基本数据类型和引用数据类型的差异。具体可阅读这篇文章

组件data为函数缘由

在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中，data必须是一个函数，因为每一个 vue 组件都是一个 vue 实例，通过 new Vue() 实例化，引用同一个对象，如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰。

Vue根实例data为JSON缘由

Vue根实例没有此限制的原因是在一个Vue项目中，根实例不会出现被复用的情况，因此不必要求data一定是一个返回对象的函数

定栓
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
为什么在Vue组件中的data只能返回函数
qq_27552077的博客
06-07 1258
引言： 通过Vue构造器传入的各种选项大多数都可以在组件里用，唯独只有data选项有区别，在Vue构造器中data返回的是对象，但是在组建中必须返回一个函数。why？先来看下面一个例子：HTML: <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <s
详解Vue的组件中data选项为什么必须是函数
10-14
然而，Vue官方文档规定，`data`选项必须是一个函数，而不是一个对象。这是为了确保组件实例之间数据的隔离和独立性。 首先，我们来看一下官方的解释。当`data`是一个对象时，如果在多个组件实例中复用该对象，所有...
结合源码，Vue组件data为什么必须是个函数而Vue的根实例则没有此限制
见贤思齐
04-02 264
源码：src\core\instance\state.js-initData() 函数每次执行都会返回全新data对象实例 1.测试代码 <body> <div id="demo"> <comp></comp> <comp></comp> </div> <script src=...
2.vue组件data为什么必须是一个函数，而vue的根实例则没有限制
weCat_s的博客
12-06 475
源码中找答案：src/core/instance/state.js-initData() 多实例的情况下，为了保证大家的状态的不污染、不干扰 需要是一个函数 函数每次执行都会返回新的data对象实例 测试代码： <html> <head> <title>Vue事件处理</title> </head> <body> <div id="demo"> <h1>vue组件data为什么必须是个函数?
Vue组件data为什么要是函数形式而根实例没有限制？
weixin_61964186的博客
03-24 408
Vue组件data为什么要是函数形式而根实例没有限制？
vue训练营2 --- Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制
m0_38066007的博客
07-31 203
源码中找答案：src\core\instance\state.js - initData() functioninitData(vm:Component){ letdata=vm.$options.data /* 先判断data的类型 如果data类型是函数，则执行data函数，并将其结果作为data选项的值， 否则使用用户设置的data */ data=vm._data=typeofdata==='fu...
Vue组件为什么data必须是一个函数
11-20
我们需要先复习下原型链的知识，其实这个问题取决于 js ，而并非是 vue 。 function Component(){ this.data = this.data } Component.prototype.data = { name:'jack', age:22, } 首先我们达成一个共识（没有这...
Vue组件中的data必须是一个function的原因浅析
10-18
Vue规定，`data`必须是一个函数，而不是一个对象，这是为了确保组件实例的独立性和状态管理的正确性。下面我们将深入探讨这个设计决策的原因。 首先，我们要理解JavaScript中对象的引用类型特性。当一个对象被赋值...
Vue函数式组件的应用实例详解
12-11
因为函数式没有实例，因此组件需要的一切都是通过context参数传递，它是一个包括如下字段的对象： props：提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数，返回了包含所有插槽的对象scopedSlots...
Vue的常见问题(二) - Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？
qq_36782473的博客
10-20 318
vue组件data为什么必须是个函数而Vue的根实例则没有此限制？一、案例分析二、源码分析1. 关于data的初始化2. 关于自定义组件和根实例的创建三、结论 一、案例分析 <!DOCTYPE html> <html> <head> <title>Vue</title> </head> <body> <div id="demo"> <h1>vue组件data为
解析vue data不可以使用箭头函数问题
08-27
主要介绍了vue data不可以使用箭头函数问题，本文通过源码解析给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
[Vue][面试]Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制?
你好，欢迎光临！
08-17 191
Vue组件data选项为什么必须是个函数而Vue的根实例则没有此限制? 源码追溯：src\core\instance\state.js–initData() 函数每次执行都会返回全新data对象实例 结论 Vue组件可能存在多个实例，如果使用对象形式定义data,则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的； 采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。 而在Vue根实例创建过程中则不存在该限制，也是因
Vue组件中的data必须是个函数
ZZ15901898915的博客
12-18 168
Vue组件中的data必须是个函数 最近一直在学习Vue，今天看到一个知识点，感觉有必要记录下，以免后面忘记。 每个Vue组件其实也可以看成时一个Vue实例，它也有生命周期，data，methods等。其中在Vue组件中，data必须是个函数，这是因为： 组件是可复用的，我们开发好每个组件后，希望它可以在项目中多个地方使用，但又相互不影响。如下面示例： my-counter这个组件，我在界面复用三次，在每次复用my-counter组件时，data其实时返回了一个新的对象，当我改变其中任何一个组件的数据时，对
Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？
ZkD953的博客
11-19 208
js示例一： //定义一个学生 var Student = function(name, age) { this.name = name; this.age = age; //初始化data this.data = this.data; }; //使用JSON形式 Student.prototype.data = { score: Math.floor(Math.random() * 101)//随机生成一个分数 } //创建学生A，B var studentA = new Student("
为什么Vue组件的data选项必须是一个函数
m0_53972782的博客
06-24 273
因为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是一个对象的话，当有多...
Vue组件的data为什么必须是函数
M_Jin的博客
03-11 298
这是为了避免组件间的数据相互影响。
vue-为什么子组件中的data选项必须是函数？
weixin_30904593的博客
11-27 379
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="../../vue.js"></...
vue组件中data为什么必须是函数？
JIAFury的博客
01-13 291
data组件是vue的实例 组件共享data属性，当data的值是同一个引用类型的值时，改变其中一个会影响其他 组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据，而单纯的写成对象形式，就会使所有组件实例共用了一份data，就会造成一个变了全都会变得结果。 ...
Vue实例选项之【data】
HMF的博客
02-22 397
data 通过 Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内声明，这样不至于将数据散落在业务逻辑中，难以维护。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue实例选项之【data】</title> <!-- <script src=".
Vue的组件data为什么必须是一个函数
最新发布
05-12
在Vue中，组件的data选项必须是一个函数，而不能是一个对象。这是因为在Vue中，组件是可以被复用多次的，如果使用一个对象作为data选项，那么所有的实例都会共享这个对象，这样就会造成数据的混乱。 使用一个函数...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

定栓

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值