vue里的data要用return返回的原因浅析
更新时间：2019年05月28日 17:12:22 作者：枝麻酱
这篇文章主要介绍了vue里的data要用return返回的原因浅析,需要的朋友可以参考下
官网的示例
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
}
});
项目中的写法
data() {
return {
message: 'Hello'
}
}
为什么要把data变成函数并return属性呢？
组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。
将data封装成函数后，在实例化组件的时候，我们只是调用了data函数生成的数据副本，避免了数据污染。
PS：下面看下vue中data是否使用return的区别
// Vue实例中data属性是如下方式展示的：
let app = newVue({
el: "#app",
data: { msg: '' },
methods: {}
})
// 使用组件化的项目中是如下方式展示的:
export default{
data(){
return{
showLogin:true,
msg:''
}
},
methods:{}
}
// 为何在大型项目中data需要使用return返回数据呢？
// 答：不使用return包裹的数据会在项目的全局可见，会造成变量污染
// 使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件
总结
以上所述是小编给大家介绍的vue里的data要用return返回的原因浅析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了vue.js基于ElementUI封装了CRUD的弹框组件，问咋会给你围绕主题展开详细的内容介绍，感兴趣的小伙伴可以参考一下2022-07-07
本文主要介绍了Vue实现未登录跳转到登录页的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了详解Vue源码之数据的代理访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本篇文章主要介绍了详解Vue组件之间的数据通信实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
今天小编就为大家分享一篇解决vue A对象赋值给B对象,修改B属性会影响到A的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在本篇文章里小编给大家分享的是关于vuex入门最详细整理的相关内容，需要的朋友们参考下。2020-03-03
这篇文章主要给大家介绍了关于vite基本常见配置讲解的相关资料,最近做项目要求将webpack打包方式换成vite,下面将详细讲解一下配置vite需要改动的东西,需要的朋友可以参考下2023-11-11
今天小编就为大家分享一篇浅谈v-for 和 v-if 并用时筛选条件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了elementui中el-input回车搜索实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
本篇文章主要介绍了浅谈mvvm-simple双向绑定简单实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论