vue学习笔记之:为何data是一个方法

在vue开发中,我们可以发现,data中的属性值是在function中return出来的。可为何data必须是一个函数呢?我们先看官方的解释:

当一个组件被定义, data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象

而我对这句话的理解是:

类比与引用数据类型。如果不用function return 每个组件的data都是内存的同一个地址,那一个数据改变其他也改变了,这当然就不是我们想要的。用function return 其实就相当于申明了新的变量,相互独立,自然就不会有这样的问题;js在赋值object对象时,是直接一个相同的内存地址。所以为了每个组件的data独立,采用了这种方式。如果不是组件的话,正常data的写法可以直接写一个对象,比如data:{ msg : ' 下载 ' },但由于组件是会在多个地方引用的,JS中直接共享对象会造成引用传递,也就是说修改了msg后所有按钮的msg都会跟着修改,所以这里用function来每次返回一个对象实例

vue学习笔记之:为何data是一个方法的更多相关文章

  1. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  2. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  3. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  4. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  5. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  6. AntDesign vue学习笔记(七)Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  7. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  8. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  9. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

随机推荐

  1. wps for linux 安装后系统缺失字体安装配置

    错误提示: 解决方法: 从http://bbs.wps.cn/thread-22355435-1-1.html下载字体库,离线版本:(链接: https://pan.baidu.com/s/1i5dz ...

  2. 转型大数据之学前准备,掌握linux(一)

    导语:为什么要学习linux?学到什么程度? 大数据技术是运行在集群,且是linux操作系统这样的集群当中的,所以学习大数据之前,你得先掌握了linux的简单操作,没错,我们不是专门的做linux工作 ...

  3. MySQL/MariaDB学习笔记——mysql.user表中存在多个root用户问题理解

    mysql.user表中存在多个root用户问题 问题描述:使用 SELECT host,user FROM mysql.user 发现mysql.user表中存在三个root用户,如下 持着对中几个 ...

  4. nginx ssl pathinfo 伪静态 301 配置文件

    server { listen ; root /www/web/test_com/public_html; server_name test.com test.com; if ($host != '* ...

  5. phpstudy lamp

    phpStudy for Linux (lnmp+lamp一键安装包 现在不考虑安装这个  (完整版:http://lamp.phpstudy.net/phpstudy-all.bin) 安装: wg ...

  6. C语言复合数据类型

           C语言数据类型非常丰富,其中结构体的使用非常广泛,也有一点复杂,这一讲我们主要学习结构体的使用方法,同时也会学习到联合.枚举以及typedef的使用,因为结构体最为复杂,使用最广,所以我 ...

  7. MQTT客户端

    MQTT客户端 最近公司项目中使用到了一个MQTT的协议,用这个通讯协议将嵌入式端收集到的数据接入到物联网中,很是方便的解决了,嵌入式端存储空间小,也解决了用户需要自定义使用这些记录数据的需求.而且相 ...

  8. Java设计模式(13)——结构型模式之桥梁模式(Bridge)

    一.概述 概念 将抽象与实现脱耦,使得抽象和实现可以独立运行 UML图 角色: 角色关系 二.实践 按照上面的角色建立相应的类 抽象化角色 /** * 抽象化角色 * * @author Admini ...

  9. NoSQL入门第四天——事务与主从复制

    一.Redis的事务 1.是什么 可以一次执行多个命令,本质是一组命令的集合.一个事务中的 所有命令都会序列化,按顺序地串行化执行而不会被其它命令插入,不许加塞 (更多请参见官网事务介绍) 2.能干什 ...

  10. 20145226夏艺华 逆向及Bof基础实践

    逆向及Bof基础实践 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串,如图所示: 该程序同时 ...