zoukankan      html  css  js  c++  java
  • 为什么vue组件中的data不是一个对象而是一个函数

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

      这是因为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
  • 相关阅读:
    DOM(九)使用DOM设置文本框
    DOM(八)使用DOM控制表单
    DOM(七)使用DOM控制表格
    Javascript制作伸缩的二级菜单
    Javascript屏蔽鼠标的右键的两种方法。
    DOM(六)事件类型
    DOM(五)事件对象
    DOM(四)事件流
    DOM(三)使用DOM + Css
    Javascript一个在页面内追加元素的小例子
  • 原文地址:https://www.cnblogs.com/wuqilang/p/11245915.html
Copyright © 2011-2022 走看看