vue学习笔记之:为何data是一个方法
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是一个方法的更多相关文章
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
随机推荐
- python打印99乘法表
代码如下: print(XXX,end="\t") #表示打印不换行 附带python部分转义字符:
- ethereum(以太坊)(实例)--"简单的公开竞拍"
说真的,刚开始接触这个竞拍案例--“简单的公开竞拍”,我就抱着简单的心态去查看这个实例,但是自我感觉并不简单.应该是我实力不到家的原因吧!!!233333...不过经过大半天的努力,自己理解完之后,觉 ...
- Google+百度,自动识别知名人物的性别
最近有一个任务,需要采集一批知名学者的性别信息.该任务的难点在于提供学者信息的网站并不会主动标注学者的性别性别,因此只能靠别的方法了. 对一个普通人来说,在网上判断一个人的性别的最快的方式就是看他的照 ...
- php的基础知识(一)
php(超文本预处理器)定义: php(外文名:php:Hertext Preprocessor,中文名:“超文本预处理器”)是一种通用的开源脚本语言.语法吸收了C语言.Java和Perl的特点,利于 ...
- ssh_key登录服务器,免密码登录
最近使用ssh远程登录服务器每次都要输入密码实在是太麻烦了,我这个懒人就想到了查了一下怎么用ssh-key来实现我的梦想. 使用密钥来登录 原理如下: 客户端向服务器发出请求.服务器收到请求之后,先在 ...
- 论文翻译第二弹--用python(或Markdown)对论文复制文本进行处理
图中这种论文你想进行文本复制放入翻译软件进行翻译时,会发现是这种形式: 句子之间是断开的,这时普遍的方法,也是我之前一直用的方法就是打开一个文档编辑器,复制上去后一行行地继续调整.昨天不想这样了,就打 ...
- C指针(3)——指向指针的指针(程序讲解)
int **q可以分成两部分,即int* 和 (*q),后面的 “q” 中的* 表示q是一个指针变量,前面的int*表示指针变量q只能存放int*型变量的地址.int** q表示为指针变量q只能存放i ...
- 使用Goland同步远程代码
新版本的goland貌似已经有了Deployment功能,故本篇文章描述的方法也不推荐使用了 以前写php时候习惯使用phpstorm这个编译器,除去本身功能强大不说,比较方便的是其自身带的Deplo ...
- ant-design form
表单配置 示例代码 import { Form } from 'antd'; const FormItem = Form.Item; class NormalLoginForm extends Rea ...
- msys2-x86_64搭建QT Mingw64编译环境
1.安装msys2-x86_64 2.环境变量 PATH 添加 C:\msys64\home\%name%3. 打开MSYS2 Shell,更新包数据库和核心系统包 pacman -Syu4. 关闭M ...