如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会相互干扰。

  这是因为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不是一个对象而是一个函数的更多相关文章

  1. vue组件中的data为什么是函数?

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  2. vue组件中的data与methods

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  3. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  4. Vue 组件中的data数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue组件中的data属性

    Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...

  6. Vue组件中的Data为什么是函数。

    简单点说,组件是要复用的,在很多地方都会调用.   如果data不是函数,而是属性,就又可能会发生多个地方的相同组件操作同一个Data属性,导致数据混乱. 而如果是函数,因为组件data函数的返回值是 ...

  7. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  8. vue组件中data为什么必须是个函数

    <body> <div id="app"> <counter></counter> </div> <templat ...

  9. Vue系列之 => 组件中的data和methods

    使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. .Net Core 指定编码格式的问题

    我们在读取txt文件时,如果文件格式不是utf8,则获取的中文会乱码,所以要么另存文件为utf8格式,要么使用和文件相同的编码来读取. 如果文件为utf8,则: //一种 StreamReader s ...

  2. Java 之 LinkedList 集合

    一.LinkedList 概述 java.util.LinkedList  集合数据存储的结构是链表结构. 特点:增删快,查询慢 LinkedList 是一个双向链表,如下图 注意:该集合实现不是同步 ...

  3. python 之 sys.stdout输出不换行

    在处理程序打进度条时,希望不换行显示进度,可以使用sys.stdout相关函数来进行处理. 1.print 输出不换行 首先可以使用print函数来整体输入,利用,结尾就可以在同一行内显示: # py ...

  4. Java深入学习(6):Disruptor

    Disruptor框架简介: 并发框架,基于事件驱动,使用观察者模式 底层采用环形数组,取模算法 简单使用: /** * 声明一个Event:表示生产者和消费者之间传递的数据类型 */ public ...

  5. Cheat Engine 创建线程

    打开游戏 扫描出阳光地址 打开自动汇编 激活测试 每次激活,阳光都会自增

  6. 使用nginx 做kbmmw REST 服务的负载均衡

    我们一般在云上部署REST服务.既想利用kbmmw 的方便性,又想保证系统的安全性,同时 想通过负载均衡保证服务器的健壮性.下面我们使用ubuntu+nginx 来实现以下kbmmw rest 服务器 ...

  7. Windows Server 2012 R2 远程桌面自动设置为不允许连接问题解决方案

    用“gpedit.msc”调出策略组设置窗口,在策略组界面点击:计算机配置->管理模块->Windows组件->远程桌面服务->远程桌面会话主机->连接->允许用户 ...

  8. SpringBoot解决跨域请求拦截

    前言 同源策略:判断是否是同源的,主要看这三点,协议,ip,端口. 同源策略就是浏览器出于网站安全性的考虑,限制不同源之间的资源相互访问的一种政策. 比如在域名https://www.baidu.co ...

  9. 如何预防SQL注入

    归纳一下,主要有以下几点: 1.永远不要信任用户的输入.对用户的输入进行校验,可以通过正则表达式,或限制长度:对单引号和 双"-"进行转换等. 2.永远不要使用动态拼装sql,可以 ...

  10. Centos7部署LAMP平台之架构之路

    部署LAMP平台搭建 一.源码安装LAMP 1. 安装apache [root@localhost ~]# yum -y install gcc* apr-devel apr-util-devel p ...