为什么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 ...
随机推荐
- Python Web 之 Flask SQLalchemy
Flask-SQLalchemy 一. 一对多 A表中的一条记录与B表中的多天记录关联 语法实现: 在"多"实体类中增加 外键列名 = db.Column(db.Integer, ...
- Java基础扫盲系列(二)—— Java中BigDecimal和浮点类型
一直以来我几乎未使用过BigDecimal类型,只有在DB中涉及到金额字段时听说要用Decimal类型,但是今天再项目代码中看到使用BigDecimal表示贷款金额. 本篇文章不是介绍BigDecim ...
- 调用WebApi出现 远程服务器返回错误: (500) 内部服务器错误
一.检查错误错误 将 HttpWebResponse response = (HttpWebResponse)request.GetResponse();改为 HttpWebResponse resp ...
- Win10安装IIS并配置ASP.NET 4.0
这几天新购置了电脑家用,自家电脑上上了win10+Ubuntu.解决了双系统的一些坑之后,今天准备给win10装IDE了(虽然想在Ubuntu下搞搞React/Python之类的,但我骨子里还是个.N ...
- 2019 中兴java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.中兴等公司offer,岗位是Java后端开发,因为发展原因最终选择去了中兴,入职一年时间了,也成为了面试官,之 ...
- Python pip安装第三方库的国内镜像
Windows系统下,一般情况下使用pip在DOS界面安装python第三方库时,经常会遇到超时的问题,导致第三方库无法顺利安装,此时就需要国内镜像源的帮助了. 使用方法如下: 例如:pip inst ...
- 看年薪50W的架构师如何手写一个SpringMVC框架
前言 做 Java Web 开发的你,一定听说过SpringMVC的大名,作为现在运用最广泛的Java框架,它到目前为止依然保持着强大的活力和广泛的用户群. 本文介绍如何用eclipse一步一步搭建S ...
- 玩转zynq7010+ FPGA点亮三色灯
前期主要以开发Z-TURN的PL部分为主,以期望了解该芯片的逻辑架构和系统总线,以及所有外设,后面在开始PS部分的开发,闲话少说,先看整个7z010的系统框图,所有开发目前基于ISE14.6来设置, ...
- js进度条源码下载—js进度条代码
现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进 ...
- Redux 进阶之 react-redux 和 redux-thunk 的应用
1. react-redux React-Redux 是 Redux 的官方 React 绑定库. React-Redux 能够使你的React组件从Redux store中读取数据,并且向 stor ...