美文网首页
vue组件中的data不是一个对象而是一个函数

vue组件中的data不是一个对象而是一个函数

作者: 魅眼ALong | 来源:发表于2020-04-24 16:06 被阅读0次

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

    而函数具有作用域,为了不让所有的实例共享引用同一个数据对象,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不是一个对象而是一个函数

          本文链接:https://www.haomeiwen.com/subject/guvfwhtx.html