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

  这是因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。

  组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。

  1. function Box(){
  2.  
  3. }
  4. Box.prototype.data={
  5. msg:"aaa"
  6. };
  7. var b1=new Box();
  8. var b2=new Box();
  9. b1.data.msg="bbb";//--------------这里修改一个实例的属性,会造成另一个实例的属性也跟着修改了
  10. console.log(b1.data.msg);//------bbb
  11. console.log(b2.data.msg);//------bbb
  1. function Box(){
  2. this.data=this.data();
  3. }
  4. Box.prototype.data=function(){
  5. return{
  6. msg:"aaa"
  7. }
  8. };
  9. var b1=new Box();
  10. var b2=new Box();
  11. b1.data.msg="bbb";//-----------------如果是函数的形式去定义的属性,这样它们有自己的作用域,在修改的时候不会影响到别人
  12. console.log(b1.data.msg);//----bbb
  13. 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. 重点|183道Java面试题可以说很详细了

    <p style="text-align: right;"><span style="font-size: 14px;color: rgb(136, 1 ...

  2. Python列表(list)所有元素的同一操作

    针对很普遍的每个元素的操作会遍历每个元素进行操作. 这里给出了几种写法,列表每个元素自增等数学操作同理: 示例:整形列表ilist加1个数.元素类型转字符串: ilist = [1, 2, 3, 10 ...

  3. 我的第一个netcore2.2 api项目搭建(三)

    上一章快速添加了swagger文档管理功能,我的第一个netcore2.2 api项目搭建(二) 这一章实现目标三:api添加身份验证功能 在实现该目标之前,先得理解netcore运行机制. 这是微软 ...

  4. c#异步方法调用

    var t1 = new Task(() => GkeyTest()); DisplaylistboxMSG("初始化:" + t1.Status.ToString()); ...

  5. J2EE 练习题 - JSON HTTP Service

    J2EE 练习题 - JSON HTTP Service 1 要求 2 示例代码 2.1 Server 端 2.2 客户端 - Java 1 要求 在 Tomcat 上布署一个 HTTP Servic ...

  6. javascript:void(0)的含义

    void关键字介绍 首先,void关键字是javascript当中非常重要的关键字,该操作符指定要计算或运行一个表达式,但是不返回值. 语法格式: void func() void(func()) 实 ...

  7. Java 之 LinkedHashSet 集合

    一.概述 java.util.LinkedHahset 集合 extends HashSet 集合 在HashSet下面有一个子类java.util.LinkedHashSet,它的底层是一个哈希表( ...

  8. linux ssh scp免密码

    1.首先登入一台linux服务器做为母机(即登入其他linux系统用这台做为入口):执行一行命令生成key文件:ssh-keygen -t rsa 2.在母机上,进入/root/.ssh目录,找到id ...

  9. XenCenter安装VM

    XenServer是服务器"虚拟化系统".系统设置为Linux_x86-64即可安装XenServer 和VMware ESX/ESXi有点不同的是,XenServer 不能在Xe ...

  10. NGINX一览无余

    Nginx 是如何实现高并发的? 异步,非阻塞,使用了epoll 和大量的底层代码优化. 如果一个server采用一个进程负责一个request的方式,那么进程数就是并发数.正常情况下,会有很多进程一 ...