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 相关文章推荐
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
jQuery插件bxSlider实现响应式焦点图
Apr 12 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
详解vue-router导航守卫
Jan 19 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
vue模块移动组件的实现示例
May 20 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
手把手教你打印出PDF(关于fpdf的简单应用)
2013/06/25 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
js 数组详细操作方法及解析合集
2018/06/01 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python turtle 绘制太极图的实例
2019/12/18 Python
怎么快速自学python
2020/06/22 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
档案检查欢迎词
2014/01/13 职场文书
聚美优品的广告词
2014/03/14 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
温馨提示标语
2014/06/26 职场文书