vue项目中为生命什么data是一个函数而不是一个对象

已于 2023-08-28 22:49:30 修改
阅读量34 收藏
点赞数
文章标签： vue
于 2023-08-28 17:03:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhoujiadong001/article/details/131988201
版权

因为组件是可复用的实例，如果其它页面也用到了该组件，且不使用return包裹数据就会全局可见，造成变量污染，只要其中一个页面更改数据其他页面用到该组件的变量也会被修改。因此组件中的data必须是一个函数，使用return返回一个对象。

而vue根实例可以是一个对象 其它组件data必须是函数

周佳栋
关注
Vue中为组件绑定数据为什么要使用data()函数而不使用data对象的方式
向左z的博客
02-22 1185
一个加数器的例子： <body> <div id="num"> <cpn></cpn> <cpn></cpn> <cpn></cpn> </div> <template id="cpn"> <div> <...
vue 解决computed修改data数据的问题
10-16
然而，对于 `computed`，Vue期望其返回一个计算结果，而不是修改状态。 为了解决这个问题，Vue提供了 `setter` 和 `getter`，允许我们在 `computed` 中创建可写的属性。在上述例子中，`fold` 是一个 `data` 属性，...
为什么Vue2 data属性是一个函数而不是一个对象
weixin_43867229的博客
03-20 454
在 Vue 2 中，组件的 data 选项必须是一个函数，而不是一个对象。这个函数返回一个新的数据对象，这样每个实例可以维护一份被返回对象的独立的拷贝。如果 data 直接是一个对象，那么由于 JavaScript 中对象是引用类型，所有的组件实例将共享同一个数据对象，当在一个组件实例中改变数据，其他所有的组件实例的数据也会被改变。在上面的例子中，第一个组件的 data 是一个对象，这是错误的。第二个组件的 data 是一个函数，返回一个新的数据对象，这是正确的。
Vue2组件的data为什么是函数，而不是对象
weixin_44072254的博客
05-08 519
组件实例 data 必须为函数，目的是为了防止多个组件实例对象之间共用一个 data(组件在创建的时候，源码会进行选项合并，会对定义的data进行数据校验，如果不是function，则出现警告)，产生数据污染。采用函数的形式，initData 时会将其作为工厂函数会返回全新 data 对象。根实例对象可以是函数也可以是对象(根实例是单例)，不会产生数据污染。data使用函数形式就不会造成数据污染。data是对象，数据之间会共用、污染。以下为个人见解，仅供参考。
vue组件中data为啥是函数return一个对象，而不直接是一个data
ahuang_12138的博客
04-26 2340
官网的示例 var vm = new Vue({ el: '#example', data: { message: 'Hello' } }); 项目中的写法 data() { return { message: 'Hello' } } 为什么要把data变成函数并return属性呢？ 组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。 将data封装成函数后，在实例化组件的时候，我们只是调用了da
【八股系列】为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？
to_the_Future的博客
06-21 1063
在 Vue.js 开发过程中，我们经常遇到这样一个疑问：为什么在创建组件时，data 需要定义为返回对象的函数，而在创建根 Vue 实例时，data 却可以直接是一个对象？这个问题涉及到 Vue 的核心设计理念，即数据绑定、组件复用以及状态管理。
VUE v-for循环中每个item节点动态绑定不同函数的实例
10-17
值得注意的是，这里用到的`this[methodsWords]()`而不是`this.methodsWords()`，是因为`methodsWords`是一个动态的字符串，需要动态解析为实际的函数引用。 这个实例展示了Vue组件化思想的运用，以及如何通过父子...
在vue3中为<el-table :data="tableData" @click="onPush">写一个点击事件
04-03
在vue3中为<el-table :data="tableData" @click="onPush">写一个点击事件可以如下所示： ``` <el-table :data="tableData" @click="onPush"> <!-- 表格列定义 --> export default { data() { return { ...
vue+iview 在data函数中为表格添加日期选择器
05-25
可以使用iview中的DatePicker组件，在data函数中定义一个日期变量，然后在表格的列定义中使用render函数来渲染DatePicker组件，具体代码如下： ```html <Table :columns="columns" :data="tableData"> ...
考研复习-英语二真题考试题集-带答案
09-14
英语二考研真题复习资料，带答案版
2024中美独角兽公司发展分析报告.pdf
09-14
全球各大洲独角兽企业分布、中美独角兽企业对比（数量、估值、新增及退榜情况、行业分布、所在城市）、
C++ 中的异步编程模型是什么
09-14
在C++中，异步编程模型是处理并发任务、提高程序性能和响应性的关键技术。以下是C++中实现异步编程的几种主要方式： 每种异步编程模型都有其适用场景和优缺点。选择合适的模型可以提高代码的可读性、可维护性和性能。随着C++标准的不断发展，异步编程模型也在不断进化，为开发者提供了更多的工具和选择。 在实际开发中，应根据具体需求选择合适的异步编程模型。例如，对于简单的异步任务，回调函数可能是最直接的选择；而对于需要结构化错误处理和结果获取的复杂异步任务，std::async和std::future可能更合适；在需要高效资源管理的场景下，线程池是一个不错的选择；而对于需要编写大量异步代码的现代应用程序，协程提供了一种更简洁、更直观的解决方案。 总之，C++中的异步编程模型是多核和高并发环境下提高程序性能的重要工具。通过合理使用这些模型，开发者可以构建出更高效、更可靠的软件系统。
正则表达式Regex是一种文本模式.docx
09-14
正则表达式（Regular Expression，简称Regex或Regexp）是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式是强大的文本处理工具，广泛用于搜索、编辑或操作文本和数据。 基本组成 普通字符：大多数字符，包括所有大写和小写字母、所有数字、所有标点符号和一些其他符号，都是普通字符。正则表达式中的普通字符表示它们自身。例如，正则表达式test会匹配字符串"test"。 特殊字符（元字符）：一些字符在正则表达式中具有特殊的意义，如^、$、.、*、+、?、{、}、[、]、|、\等。这些特殊字符用于表示在搜索文本时要匹配的一个或多个字符。例如，.匹配除换行符之外的任何单个字符。 字符类：字符类允许你指定一组字符中的任何一个字符。例如，[abc]匹配"a"、"b"或"c"中的任意一个字符。你也可以使用范围，如[a-z]匹配任何小写字母。 预定义字符类：正则表达式提供了一些预定义字符类，用于匹配常见的字符集合。例如，\d匹配任何数字（等价于[0-9]），\s匹配任
基于struts+sqlserver网络购物系统毕业课程源码设计+论文资料
09-14
编号：150 系统功能： 展示网站最新的商品信息。 展示网站特价的商品信息。 为用户提供修改个人资料和查看在网站操作情况的平台。 提供用户在网站上购物的平台。 展示网站发布的公告信息。 展示商品的销量排行。 展示网站的友情链接信息。 对商品详细信息以及分类信息进行管理。 对用户基本资料、交易制度、消费情况及留言信息进行管理。 对用户提交的订单进行管理。 对管理员信息、网站公告信息、商业资讯信息及友情链接信息进行管理。 系统运行稳定，具有强大的数据处理能力。 操作注意事项 （1）本系统的用户名为：admin，密码为：admin （2）admin管理员的信息不能删除。 （3）用户注册登录后，可进行商品购买、商品信息查看以及订单查询操作。 （4）后台登陆地址：http://localhost:8080/WebShopping/bg-land.jsp。
基于ssm的高校毕业生就业管理系统设计与实现.docx
09-14
基于ssm的高校毕业生就业管理系统设计与实现.docx
退工、裁员培训讲义.ppt
09-14
退工、裁员培训讲义.ppt
认知实习decesion tree代码
最新发布
09-14
认知实习decesion tree代码
Java 算法：冒泡，选择，插入排序算法
09-14
Java 算法：冒泡，选择，插入排序算法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值