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继承机制的设计思想分享
Aug 28 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php下封装较好的数字分页方法
2010/11/23 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
js生成缩略图后上传并利用canvas重绘
2014/05/15 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
python实现bitmap数据结构详解
2014/02/17 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
php png失真的原因及解决办法
2021/10/24 PHP
海弦WR-800F
2022/04/05 无线电