vue data中的return

已于 2024-05-22 19:04:46 修改
阅读量510 收藏
点赞数 14
分类专栏： 前端 文章标签： vue.js javascript 前端
于 2024-05-22 19:02:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daxiashangxian/article/details/139127343
版权

vue 的data return 是干啥的呢，vue中页面中绑定的变量都要放在data的return中，可以赋值，值可在script中改，修改引用就用this了

如果不使用return包裹的数据会在项目的全局中可见，会造成变量污染；

使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。

组件是一个可复用的vue实例，如果data是一个普通的对象，那么所有复用这个实例的组件都将引用同一份数据，会造成数据污染。

如果将data封装成一个函数，实例化组件时只是调用了这个函数生成的副本，避免了数据污染

参考vue data中的return使用方法示例_vue.js_脚本之家

大霞上仙
关注
  • 14
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实例中data使用return包裹的方法
10-18
今天小编就为大家分享一篇vue实例中data使用return包裹的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue里的data要用return返回的原因浅析
10-16
主要介绍了vue里的data要用return返回的原因浅析,需要的朋友可以参考下
Vue变量定义
weixin_40025677的博客
10-04 518
Vue data中的变量如何定义说明 在vue中如何需要定义一个变量,则需要在data–>>return中定义 在组件中如果我们想拿到,在return中定义的变量,我们则可以this.变量即可 定义规则 :如果在return中定义_变量的话,在组件中我们this._变量是没有的 ...
vue中data函数中return 理解
YFirst_的博客
05-18 1万+
【个人笔记】vue中data函数中为何return 相关理解 常见小项目、示例中的data写法为： ​ data:{ a: 10} 这种写法data对象是引用类型 大项目中通常要return新对象： data(){return {a:10}} 函数写法，每次返回新对象 为什么要return 呢？ 因为如果vue项目过大，创建多个相同组件时，未用 return 创建新对象的 data 都将指向同一个地址，造成数据污染， 通过函数写法return一个新对象，对象地址不同，数据之间相互独立，避免数据污
vue中data和return data的区别
weixin_45159207的博客
12-04 2215
Vue实例中data属性： new Vue({ el: '#app', data: { message: 'Hello Vue' } }) 组件化的项目中使用： export default{ data(){ return { message: 'hello vue', } }, } 注：在大型项目...
vue data 中的 return 用法
AKM5201314的博客
05-10 1万+
文章目录一、vue 里面的data return 是什么？二、如何使用1.vue 双向绑定 v-model2.带有 ":"的属性 比如:class、:id等等3. 标签使用return里面的属性 提示：以下是本篇文章正文内容，下面案例可供参考 一、vue 里面的data return 是什么？ uniapp项目 vue 结构中data 里面的return详解 从字面上理解 data 是数据的意思 return是返回的意思,我个人理解的是 将数据返回出去。 二、如何使用 1.vue 双向绑定 v-mo
Vue为什么使用return返回data对象的原因
TianQiWanLaiQiu的博客
07-20 1851
Vue要求data必须是一个返回对象的函数，是为了保证组件之间数据的隔离，实现数据的响应式，并避免共享数据带来的问题。这是Vue框架设计的重要特性之一，为开发者提供了更加安全、稳定和灵活的数据管理方式。因此，我们在使用Vue开发项目时，应该始终遵循将data设置为一个返回对象的函数的规范，以充分发挥Vue的响应式和数据隔离特性，提高应用的可维护性和稳定性。
vue中data为什么要return
CSDN_KONGlX的博客
03-03 1672
首先先看一下下面的代码 var vm = new Vue({ el: '#example', data: { message: 'Hello' } }); 这种写法data对象是引用类型 //在vue组件中这样写 data() { return { message: 'Hello' } } //函数写法，每次返回新对象 ...
Vue中的data为什么需要return
m0_60237095的博客
11-13 651
vue文件中的对象会作为选项（option）构建组建实例。当存在多个相同的组件被引用，其实都是基于同一份对象进行创建，如果data是对象，则这些组件data都会指向同一个对象，因为会相互干扰，使用函数就可以在构建时调用函数生成对象，此时组建之间的data互不干扰。因为如果vue项目比较大，创建多个组件时，未用return创建对象的data都将指向同一个地址，造成数据污染，通过函数写法return一个新对象，对象的地址不同，数据之间相互独立，避免数据污染。函数写法：每次返回新对象。
vue中的data要用return返回
qq_60163657的博客
03-17 3809
1.不使用return包裹的数据会在项目全局可见，会造成变量污染，使用return包裹数据中的变量只在当前组件中生效，不会影响其他组件 2.当一个组件被定义，data必须为其声明返回一个初始数据对象的函数，因为组件可能被用来创建多个实例 //简单vue实例中data属性是如下方式展示 对象式 let app = newVue ({ el:"#app", data:{ name:'' } }) //在组件实例化项目中 函数式 组件必须使用 export d
vue data变量相互赋值后被实时同步的解决步骤
11-19
return { title: 'web前端 this data变量相互赋值后被实时同步问题', val_1: 'vue', val_2: '' } } 问题源： 我们在onload()把val_1 赋给 val_2 (或者在用户click时更改也都会出现这个问题) onload() { this....
Vue中data数据被return包裹与不包裹的区别
lzzw的学习之路
11-10 1949
1、不使用return包裹的数据会在项目的全局可见，有可能造成变量污染； 每个.vue都是一个组件，组件就是一个可复用的vue实例。这就意味着，如果你的data是普通的数据域的话，那么所有复用该组件的实例都会引用同一份数据，这就造成了数据污染。 2、使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。 通过提供 data 函数，每次创建一个新实例后，从而返回初始数据的一个新副本数据对象。 ...
Vue Data(){return { ........}}
giraffebig的博客
09-20 1294
Vue Data(){return { ........}}
vue组件中data数据return的意义
hkduan的博客
04-02 4274
VUE组件中 data 里面的数据为什么要return 出来 请先看下面示例 var obj={ name:"zhangsan", age:20 } var a=obj; var b=obj; a.age=18 console.log(a,b) // {name: "zhangsan", age: 18...
Vue中data作为函数返回的原因
qq_40781291的博客
02-24 536
原因 在开发可重用组件的时候Vue的data作为函数return其他的对象。 将data作为对象将导致全局变量污染，即一个组件修改data后另一个组件的data也被修改。 而将data设定成返回对象的函数时，每个实例可以维护被返回对象的独立拷贝。即每次都会有新的对象生成，即内存栈中的引用地址不一样，也就不会有全局变量污染。 举个例子 //当data作为对象时 data{ count:0 ...
vue的变量互相引用
最新发布
2301_76149545的博客
11-23 1038
vue在data中定义变量需要依赖data中的其他变量，undefined
Vue细究——为什么vue中的data要用return返回
热门推荐
很多时候犯错都是在不知情的情况下发生的
07-04 1万+
开始学vue的时候总是抱着“是什么，怎么用”的策略，最近搞了一些项目之后觉得是时候搞下“为什么了” 为什么在项目中data需要使用return返回数据呢？ 大家知道用组件化来写vue项目,每个.vue都是一个个组件。那什么是vue中的组件？ 官网写的很易懂——组件就是一个可复用的vue的实例。 这也就意味着如果你的data是一个普通的对象，那么所有复用这个实例的组件都将引用同一份数据，这就造成了数据污染！ 这个时候如果我们将data封装成一个函数，我们在实例化组件的时候只是调用了这个函数生成的数据副本，
vue中data return
04-04
在Vue中，data属性是一个函数，它返回一个对象，该对象包含组件中需要的所有数据。这个函数可以被调用多次，每次调用都会返回一个新的对象，这就保证了每个组件实例都有自己独立的数据。 例如： ``` export ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值