为什么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 ...
随机推荐
- Java学习:面向对象三大特征:封装、继承、多态之封装性
面向对象三大特征:封装.继承.多态. 封装性在Java当中的体现: 方法就是一种封装 关键字private也是一种封装 封装就是将一些细节信息隐藏起来,对于外界不可见. 问题描述:定义Person的年 ...
- mybatis使用用stdout-logging日志显示sql语句
在开发中,我们很多时候需要知道当前执行的sql语句是什么样的,但是默认mybatis是不显示sql的,此时我们就可以使用stdout-logging了.1.创建mybatis-config.xml文件 ...
- pickle导入变量AttributeError的解决方案
问题描述: AttributeError: 'module' object has no attribute ‘attr1’ 解决方案: # 找到报错的文件a.py from a import att ...
- 2019 荔枝java面试笔试题 (含面试题解析)
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.荔枝等公司offer,岗位是Java后端开发,因为发展原因最终选择去了荔枝,入职一年时间了,也成为了面试官,之 ...
- Java自学-操作符 算数操作符
Java的算数操作符 算数操作符 基本的有: + - * / % 自增 自减 ++ -- 基本的加 减 乘 除: public class HelloWorld { public static voi ...
- 使用 HttpWebRequest 类做 POST 请求没有应反
这几天给系统做第三方集成, 需要调用另一个软件的一个接口, 通过 HTTP 的方式调用,调用代码也挺简单的: string serviceUrl = string.Format("{0}/{ ...
- Matlab代理模式
代理模式(Proxy)就是给一个对象提供一个代理对象,并有代理对象来控制对原有对象的引用.代理模式和装饰模式非常类似,但最主要的区别是代理模式中,代理类对被代理的对象有控制权,决定其执行或者不执行.本 ...
- 世界上最大的软件注册表-----npm
npm 是什么? npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门.它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个 包(pack ...
- springBoot 发布war/jar包到tomcat(idea)
参考链接:https://blog.csdn.net/qq1076472549/article/details/81318729 1.启动类目录新增打包类: 2.pom.xml新增依赖:<pa ...
- org.apache.catalina.core.StandardService - Stopping service [Tomcat]
今天在启动springboot项目突然启动失败,但是在测试日志文件,以为是日志出错,下面这个是logback打印的异常信息. 2019-05-30 15:09:10.686 [restartedMai ...