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 相关文章推荐
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
Jan 04 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
Node.js API详解之 timer模块用法实例分析
May 07 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 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生成略缩图代码
2012/07/16 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
js 浏览器事件介绍
2012/03/30 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
学校后勤岗位职责
2014/02/19 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
创先争优活动承诺书
2014/08/30 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
JavaScript中reduce()的用法
2022/05/11 Javascript
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS
如何利用python实现Simhash算法
2022/06/28 Python