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 相关文章推荐
jQuery中:selected选择器用法实例
Jan 04 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
Vue封装的可编辑表格插件方法
Aug 28 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
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
简单实现jQuery轮播效果
2017/08/18 jQuery
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
python画微信表情符的实例代码
2019/10/09 Python
基于python 凸包问题的解决
2020/04/16 Python
Python学习笔记之装饰器
2020/08/06 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
求职自荐信格式
2013/12/04 职场文书
考试退步检讨书
2014/01/15 职场文书
销售主管岗位职责
2014/02/08 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
我的长征观后感
2015/06/09 职场文书
2016春节放假通知范文
2015/08/18 职场文书
导游词之峨眉山
2019/12/16 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers