vue组件中的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
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容