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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
js模糊查询实例分享
Dec 26 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 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定时执行计划任务的多种方法小结
2011/12/19 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
javascript中onmouse事件在div中失效问题的解决方法
2012/01/09 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
浅谈javascript的Array.prototype.slice.call
2015/08/31 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
利用JavaScript实现栈的数据结构示例代码
2017/08/02 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python写的Socks5协议代理服务器
2014/08/06 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
Python socket模块方法实现详解
2019/11/05 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
类和结构的区别
2012/08/15 面试题
音乐教育感言
2014/03/05 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
2014个人年度工作总结
2014/12/15 职场文书
西岭雪山导游词
2015/02/06 职场文书
银行自荐信范文
2015/03/25 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang