vue 为什么组件的data要写成返回对象的函数_LesterWeng的博客-CSDN博客
vue 为什么组件的data要写成返回对象的函数
LesterWeng
于 2018-09-20 21:44:16 发布
4426
收藏
分类专栏：
VUE
文章标签：
vue
data
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33576343/article/details/82793894
版权
VUE
专栏收录该内容
6 篇文章
1 订阅
订阅专栏
原因：对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题
上面解释完，你可能还是不大清楚，下面我们举个简单的例子：
// 1.对象方式（所有重用的实例中的data均为同一个对象）
var data = {
x: 1
var vm1 = {
data: data
var vm2 = {
data: data
vm1.data === vm2.data // true，指向同一个对象
// 2.函数方式（所有重用的实例中的data均为同一个函数）
var func = function () {
return {
x: 1
var vm3 = {
data: func
var vm4 = {
data: func
vm3.data() === vm4.data() // false，指向不同对象
注意： 函数方式中data都指向同一个函数，但这个函数每次的返回值都是一个新的对象，可以尝试如下（效果相同）
{x:1} === {x:1} // false
new Object({x:1}) === new Object({x:1}) // false
欢迎关注、点赞
LesterWeng
关注
关注
点赞
收藏
打赏
评论
vue 为什么组件的data要写成返回对象的函数
原因：对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题上面解释完，你可能还是不大清楚，下面我们举个简单的例子： // 1.对象方式（所有重用的实例中的data均为同一个对象） var da...
复制链接
扫一扫
专栏目录
为什么在vue的组件中，data要用function返回对象呢？
shaleilei的博客
09-25
1万+
对于这个问题很多小伙伴都问过。其实官方也有自己的说法，下面这个是官方的解答：
当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data
仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
其实也很好理解
vue源码研究--Data为啥要写成函数？
qq_36711388的博客
06-03
2667
大家在使用vue的时候，肯定有想过为什么 data 要写成函数，而不允许写成对象？
首先我们要想到：
data是 Vue 实例上的一个属性。
对象是对于内存地址的引用。
函数有自己的作用域空间。
第一点无可厚非，data属性附着于 Vue 实例上。
第二点，JS 的数据类型分为基本类型和引用类型，基本类型存储在栈内存中，引用类型存储在堆内存中，并且引用类型指向的是栈内存中的堆区地址。下面两个例...
参与评论
您还未登录，请先
登录
后发表或查看评论
vue3项目实战中的接口调用方法（一）async/await用法 对axios二次封装 实现异步请求
最新发布
XSL_HR的博客
10-20
1403
从本期文章开始将会不定时更新“vue3项目实战中接口调用的三大方法”
本期文章将重点介绍vue3的async和await实现异步请求接口
Vue中data为何以函数形式返回
WindrunnerMax
06-27
1552
data为何以函数形式返回
在使用Vue构建组件化应用时，每个组件的data属性都是以函数形式返回的，这主要是在组件化实现的时候，每个实例可以维护一份被返回对象的独立的拷贝，而不是共享同一个对象的引用。
Vue简单实例
在一个Vue简单实例中，也就是不使用组件化实现的时候，data可以是一个对象，因为本身也只有一个实例，就不存在多个实例共享的问题。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title&g
在vue的组件中data为什么必须是一个函数的形式
qq_38974956的博客
11-04
290
在组件中data为什么必须是一个函数的形式
所有的组件都在同一个html中，类似于css样式，会互相干扰。如果每一个组件的数据它是对象的形式，相当于所有的组件共用一个数据源，那么如果a组件改变了其中一个数据，b组件会受到干扰。因为每一个组件都应该是独立的，所以我们用函数的形式去创建初始化数据，函数是独立的
data是一个对象，它们之间的地址空间是互通，如果是函数，它是一个私密的空间。函数是有自己的函数作用域
...
Vue的data 为什么要写成函数形式
水墨青花的博客
04-13
760
Vue 的组件都是可复用的，一个组件创建好后，可以在多个地方复用，而不管复用多少次，组件内的data都应该是相互隔离，互不影响的，所以组件每复用一次，data就应该复用一次，每一处复用组件的data改变应该对其他复用组件的数据不影响。
为了实现这样的效果，data就不能是单纯的对象，而是以一个函数返回值的形式，所以每个组件实例可以维护独立的数据拷贝，不会相互影响。
...
vue - data必须是函数返回的对象
alpha_xu_vvvvv的博客
12-23
748
为什么对象、数组 需要以一个function 返回
data也是
因为对象、数组都是引用型数据类型。当多个组件new实例的话，就会直接引用同一个data的对象的数据，一个组件数据修改，另一个就会跟着修改。
当data是一个function返回的，就是每一个data都是不一样的存放地址。
官网的解释：
当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创..
为什么在vue的组件中，data要用return返回对象？
Joe_yuqiao的博客
11-27
1790
官方：
当一个组件被定义， data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data
仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data
函数，从而返回初始数据的一个全新副本数据对象。
类比与引用数据类型。如果不用function return 每个组件的data都是内存的同一个地址，那一个数据改变其他也改变了，这当然就不是我们想要的。用function return 其实就相当于申明了.
Vue系列之data为什么要返回一个对象函数
老__L的博客
03-10
475
data为什么要返回一个对象函数
组件中的data为什么要定义成一个函数而不是一个对象？
前端杂文
03-24
369
组件中的data为什么要定义成一个函数而不是一个对象？
组件中data为什么是个函数
weixin_48995066的博客
04-29
1755
总结：
1.vue中组件是用来复用，为了防止data复用，将它定义成一个函数。
2.当我们将组件中的data写成一个函数，数据是以函数返回值形式定义的，这样每复用一次data，都会返回一份新的data，拥有自己的作用域。
3.当我们组件中data写成一个对象的时候，对象是引用数据类型，它就会共用一个内存地址，造成数据污染。
组件中的data：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UT
vue组件中data为啥是函数return一个对象，而不直接是一个data
ahuang_12138的博客
04-26
1225
官网的示例
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
});
项目中的写法
data() {
return {
message: 'Hello'
为什么要把data变成函数并return属性呢？
组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。
将data封装成函数后，在实例化组件的时候，我们只是调用了da
面试题：为什么vue组件中的data是一个函数而不是一个对象？
公众号：前端充电宝
07-05
1506
面试题：为什么vue组件中的data是一个函数而不是一个对象？
JavaScript中的对象是引用类型的数据，当多个实例引用同一个对象时，只要一个实例对这个对象进行操作，其他实例中的数据也会发生变化。
而在Vue中，我们更多的是想要复用组件，那就需要每个组件都有自己的数据，这样组件之间才不会相互干扰。
所以组件的数据不能写成对象的形式，而是要写成函数的形式。数据以函数返回值的形式定义，这样当我们每次复用组件的时候，就会返回一个新的data，也就是说每个组件都有自己的私有数据空间，它们各自维护自己的数据，不会
vue中为什么组件中的data属性必须定义为一个方法并返回一个对象
u011608672的博客
03-03
640
为什么组件中的data属性必须定义为一个方法并返回一个对象
通过计数器案例演示详解
对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；
而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题，样组件间不会互相干扰；
例1:指向一致的data数据
<!DOCTYPE html>
<html lang="en">
<head>
为什么组件中的data属性必须定义为一个方法并返回一个对象
qq_43137725的博客
12-22
416
三个数字会同时增长
<div id="app">
<my-com></my-com>
<my-com></my-com>
<my-com></my-com>
</div>
var msg = {
count: 0
};
Vue.component('myCom', {
...
vue Vue.observable返回一个响应对象
weixin_43294560的博客
06-02
334
Vue.observable
让一个对象可响应,Vue内部会用它来处理data函数返回的对象。
也可以作为最小化的跨组件状态存储器
使用:
let ob=Vue.observable(object)返回的对象可以直接用于渲染函数和计算属性内,会在发生变更时触发相应的更新
和vue3.0区别:
在Vue 2.x中,被传入的对象会直接被Vue.observable变更,所以如这里展示的,它和被返回的对象是同一个对象。
在Vue 3.x中,则会返回一个可响应的代理,而对源对象直接进行变更仍然是不
用axios请求接口数据时，返回两层data数据，应该如何解决？
coderkey
05-28
1284
如何配置axios才能让返回值直接能获取到data，而不是response.data.data？
默认请求接口获取response的返回结果
这样在读取数据的时候还需要加一层data：response.data.data，有没有配置项直接让response返回data，而不用通过response.data去获取？
axios 拦截器中response配置返回“return res.data;”如下：
// main.js
// 响应拦截
axios.interceptors.response.use(re
vue系列：data为什么必须是一个返回对象的方法
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
04-24
1909
结论
因为对象是引用数据类型，如果你写成对象，这个组件在多处被引用，只要修改一处的值，那么另一处的引用的值也会变化，这样就乱套了。
而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题。
举例
对象方式：
var data = {
x: 1
var vm1 = {
data: data
var vm2 = {
data: d...
vue data为什么是函数并返回对象！
qq_42503333的博客
08-06
744
假设我们现在开发了一个组件，组件上面的data是一个普通的对象，那么当我们实例化多个组件的时候，所有的实例将共享引用同一个数据对象，任何一个实例对数据的修改都会影响到其他实例。而将组件上面的数据定义为一个函数之后，当实例化多个组件的时候，每个实例通过调用 data 函数，从而返回初始数据的一个全新副本数据对象，这时候就避免了对象引用。
通俗来说就是：如果你不用函数，只用对象保存数据时，所有组件将引用一个公共的obj。一个属性改动，其他组件上全部都更改了。用函数来返回就完美解决这个问题。vue在实例化的时候就
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：1024
设计师：我叫白小胖
返回首页
LesterWeng
CSDN认证博客专家
CSDN认证企业博客
码龄7年
暂无认证
48
原创
14万+
周排名
94万+
总排名
12万+
访问
等级
1658
积分
25
粉丝
138
获赞
评论
214
收藏
私信
关注
热门文章
ts 特殊符号用法
23318
display: inline、block和inline-block
15178
vue 两种Object.assign响应式修改对象方式
10853
vue(2.x) 响应式修改数据（对象、数组）及难点（坑）
7617
js 事件中的target、currentTarget及事件委托
6519
分类专栏
HTML
1篇
CSS
9篇
JS
24篇
VUE
6篇
TS
3篇
NodeJS
1篇
UI框架
1篇
App
1篇
个人记录（流程、命令等）
6篇
代码分享
1篇
最新评论
阻止浏览器对html的缓存
偷吃月亮的美羊羊:
都不管用 请问还有别的办法吗
position: inherit、static、relative、absolute和fixed
想你的冬天:
谢谢博主科普inherit这个值，这个好像不太常见
浮动元素详解
地铁洗涤感冒药:
第一条评论
js 事件（绑定、解绑、三个阶段、相关方法）
Deep Learning小舟:
分析的很到位，学到了很多，大赞！
display: inline、block和inline-block
LesterWeng:
内联元素的padding 在垂直方向同样会影响布局，影响视觉表现。
只是因为内联元素没有可视宽度和可视高度的说法（clientHeight 和clientWidth 永远是
0），垂直方向的行为表现完全受line-height 和vertical-align 的影响，视觉上并没有
改变和上一行下一行内容的间距，因此，给我们的感觉就会是垂直padding 没有起作用
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
Npm 常用命令
MacOS Safari内嵌第三方iframe无法创建cookie
浏览器重绘与回流
2019年10篇
2018年43篇
2017年1篇
目录
目录
分类专栏
HTML
1篇
CSS
9篇
JS
24篇
VUE
6篇
TS
3篇
NodeJS
1篇
UI框架
1篇
App
1篇
个人记录（流程、命令等）
6篇
代码分享
1篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
LesterWeng
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值