vue里的data要用return返回的原因浅析


Posted in Javascript onMay 28, 2019

官网的示例

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返回的原因浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
phantomjs导出html到pdf的方法总结
Oct 19 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 #Javascript
Javascript三种字符串连接方式及性能比较
May 28 #Javascript
vue+element实现表格新增、编辑、删除功能
May 28 #Javascript
Vue实现表格批量审核功能实例代码
May 28 #Javascript
vue+Element实现搜索关键字高亮功能
May 28 #Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 #Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 #Javascript
You might like
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
一个典型的PHP分页实例代码分享
2011/07/28 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
javascript window对象属性整理
2009/10/24 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
python collections模块的使用
2020/10/16 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
把富文本的回车转为br标签
2019/08/09 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
北承题目(C++)
2012/05/16 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
职业规划书如何设计?
2014/01/09 职场文书
咖啡书吧创业计划书
2014/01/13 职场文书
化学教育专业求职信
2014/07/08 职场文书
班组拓展活动方案
2014/08/14 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书