为什么vue组件中的data不是一个对象而是一个函数
如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会相互干扰。
这是因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。
组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
function Box(){
}
Box.prototype.data={
msg:"aaa"
};
var b1=new Box();
var b2=new Box();
b1.data.msg="bbb";//--------------这里修改一个实例的属性,会造成另一个实例的属性也跟着修改了
console.log(b1.data.msg);//------bbb
console.log(b2.data.msg);//------bbb
function Box(){
this.data=this.data();
}
Box.prototype.data=function(){
return{
msg:"aaa"
}
};
var b1=new Box();
var b2=new Box();
b1.data.msg="bbb";//-----------------如果是函数的形式去定义的属性,这样它们有自己的作用域,在修改的时候不会影响到别人
console.log(b1.data.msg);//----bbb
console.log(b2.data.msg);//----aaa
为什么vue组件中的data不是一个对象而是一个函数的更多相关文章
- vue组件中的data为什么是函数?
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- vue组件中的data与methods
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- Vue 组件中的data数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue组件中的data属性
Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...
- Vue组件中的Data为什么是函数。
简单点说,组件是要复用的,在很多地方都会调用. 如果data不是函数,而是属性,就又可能会发生多个地方的相同组件操作同一个Data属性,导致数据混乱. 而如果是函数,因为组件data函数的返回值是 ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- vue组件中data为什么必须是个函数
<body> <div id="app"> <counter></counter> </div> <templat ...
- Vue系列之 => 组件中的data和methods
使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
随机推荐
- TCP/UDP的网络底层实现
1.1Socket的使用背景 当我们在使用微信.玩游戏.收发邮件,以及用web浏览器上网时,底层的实现是TCP/UDP的协议,封装socket实现网络通信功能. 了解了网络通信的底层实现原理,在出现s ...
- 我的第一个netcore2.2 api项目搭建(三)
上一章快速添加了swagger文档管理功能,我的第一个netcore2.2 api项目搭建(二) 这一章实现目标三:api添加身份验证功能 在实现该目标之前,先得理解netcore运行机制. 这是微软 ...
- 配置 Log4j 以便查看 MyBatis 操作数据库的过程
在 src/main/resources中添加 log4j.properties 配置文件 ,输入如下内 容.#全局面已直 log4j .rootLogger=ERROR, stdout #MyBat ...
- 第一次Git上传本地项目到github上 的命令
1.下载Git软件:https://git-scm.com/downloads, 2.下载之后安装就很简单了, 3.邮箱注册 在git bash界面输入如下内容即可完成邮箱的注册: $ git con ...
- 【方法论】5WHY分析法
一.概述 所谓“5WHY”分析法,又称“5问法”,就是连续反复使用5次“为什么”方式自问,以打破砂锅问到底方式寻找问题的根本原因的方法.“5WHY”不限定必须或只做5次为什么的提问,以找到问题根因为准 ...
- EXCHANGE上冒充任意用户--Exchange Server权限提升漏洞(CVE-2018-8581)分析
0x00 前言 这是我们2018年Top 5趣案系列中的第三个案例.这些漏洞都有一些因素使它们从今年发布的大约1,400个报告中脱颖而出.今天我们将分析一个Exchange漏洞,它允许任何经过身份验证 ...
- Python学习的开端
C语言太麻烦了,所以我打算自学Python. 自学选的书是<父与子的编程之旅>,这本书还是比较通俗易懂的. 贴上书上教我编写的猜数字游戏代码 import random secret = ...
- 搭建idea出现无法自动映射Mapper问题
org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 如出这种问题,导致的原因是mapp.xm ...
- jsp 获取后端配置文件.properties的某个配置内容
如后端有个叫做config.properties的配置文件: sys.img=st_sp jsp中引用的方式是: <%@ page language="java" impor ...
- JMETER 使用BeanShell 配合 if 控制器实现逻辑控制
业务场景 在登录后,我们根据登录的响应,判断是否执行下一步的操作. 实现步骤 1.在登录采样器树中增加BeanShell 监听器. 作用是在线程上下文变量中增加一个变量,表示登录是否成功. beans ...