vue中的data为什么是函数

已于 2023-05-23 11:09:13 修改
阅读量36 收藏
点赞数
分类专栏： vue 文章标签： javascript vue.js
于 2023-05-23 11:06:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46846007/article/details/130823045
版权
  1. 组件是可复用的vue实例，一个组件被创建好之后，可能会被用在各个地方
  2. 组件不管被复用了多少次，组件中的data数据都应该是独立的，相互隔离，互不影响的
  3. 基于这两点，组件每复用一次，data数据就应该被复制一次，当其中之一复用的组件内data数据改变时，其他复用的组件data数据不应该受影响
  4. js中的object是引用数据类型。如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变，其余的都会改变（因为js中只有函数会构成作用域，对象和if之类的都不会构成作用域）
  5. 当data是一个函数时，每个组件实例都会有自己的作用域，每个实例相互独立，不会相互影响

总结

  • 必须是函数，与vue本身无关，是js本身的特性
  • 根实例对象data可以是对象也可以是函数，因为根实例是单例，不会产生数据污染情况
  • 组件实例对象data必须是函数，防止多个组件实例对象之间共用一个data，污染变量
贾哈哈不哈哈
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
解析vue data不可以使用箭头函数问题
12-11
1 VUE.js 源码解析 注意此处只设计核心代码 这段代码也是UMD实现原理，本文这里不是重点，有兴趣的可以自行探究。 (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ...
vue中data为什么是函数
weixin_51040174的博客
05-21 1084
1、data是函数不会污染 <script> function Data(){ return{ name:'lxx', age:18 } } //在App.vue 导入import Child from "./components/Child"时 Child也是一个对象 //组件对象Child1有data属性 ，data:Data
Vue中data为什么是函数返回对象的形式？
weixin_75189998的博客
02-07 1318
因为组件是需要复用的,如果组件的data是一个对象,那么组件在复用的时候就会使用相同的对象地址, 一旦这一个地方被修改,其他的也会跟着修改. 如果组件data是一个函数, 组件在每一次复用的时候就会调用这个函数得到一个全新的对象, 这样就可以做到在复用的时候每个组件之间的数据都是独立的, 互不影响.
Vue 组件中的 data 为什么是函数？
q4717529的博客
03-18 5421
一、总结 1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。 2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。......
vue2中data为什么是函数
m0_66051368的博客
04-14 1741
根的实例对象data可以是对象也可以是函数(根实例是单例), 不会产生数据污染。组件实例对象 data 必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象，有效规避多实例之间状态污染问题。 Object是引用数据类型，如果不用function 返回，每个组件的data 都是内存的同一个地址，一个数据改变了其他也改变了， javascipt只有函数构成作用域，data是一个函数时，每个组件实例都....
vue组件中的data为什么是一个函数
热门推荐
青梅煮码
03-20 1万+
一、总结 1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。 2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。 3.当我们将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，
Vue组件为什么data必须是一个函数
11-20
我们需要先复习下原型链的知识，其实这个问题取决于 js ，而并非是 vue 。 function Component(){ this.data = this.data } Component.prototype.data = { name:'jack', age:22, } 首先我们达成一个共识（没有这...
详解Vue的组件中data选项为什么必须是函数
10-14
主要给大家介绍了关于Vue的组件中data选项为什么必须是函数的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
Vue3详细讲解
贫僧法号依平
05-15 853
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
最新发布
SongZhengxing_的博客
05-18 179
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
从零开始开发企业培训APP：在线教育系统源码剖析
meihusdk的博客
05-14 355
开发企业培训APP并非一朝一夕之功，需要全面的需求分析、合理的技术选型和系统的架构设计。在实际开发过程中，应不断根据用户反馈优化系统功能和用户体验。希望本文的剖析能够为有志于开发企业培训APP的开发者提供一些启示和帮助。
JavaScript函数进阶（1）——递归和堆栈
qq_60624992的博客
05-16 400
当一个函数解决一个任务时，在解决的过程中它可以调用很多其它函数。在部分情况下，函数会调用。有关正在运行的函数的执行过程的相关信息被存储在其。通过迭代的思路来实现，使用循环来实现。通过函数来不断调用自身来实现。
Typescript 哲学 - ts模块使用最佳实践
gu2022_3_5_21_23的博客
05-13 209
ts的作用域 默认是全局（global），这也是为什么在 两个ts文件声明同一个变量报错变量名冲突，解决方法是使某个文件以模块的形式存在（文件顶层使用 export 、import ）比如 jquery 库使用js写的，引入 jquery依赖时 全局便有了一个全局变量。语法可以在模块中添加全局声明。，这时可以声明一个 全局的 变量声明对 其访问的属性进行控制。1、（可以通过 /// 语法分割为多个文件）隔离代码的作用域范围、较好的代码组织形式。块中的内容会被视为全局声明。ts 的全局作用域的应用场景。
Vue中data为什么必须是个函数
06-08
在Vue中，组件的data选项必须是一个函数，而不是一个对象。这是因为Vue在创建组件时，会为每个组件都创建一个独立的作用域，如果data选项是一个对象，那么所有组件都将共享这个对象，这样会导致一个组件的状态变化...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值