VUE组件中 data 里面的数据为什么要return 出来

VUE组件中 data 里面的数据为什么要return 出来

请先看下面示例

var obj={
    name:"zhangsan",
    age:20
  }
  var a=obj;
  var b=obj;
  a.age=18
  console.log(a,b)   // {name: "zhangsan", age: 18} {name: "zhangsan", age: 18}

这是为什么呢 因为JS中Object是引用数据类型,我定义变量a和b等于obj对象时只是进行了对象的浅拷贝，a和b的值其实只是一个指向obj对象的地址(也就是栈)，
在我修改a.age时，JS 会通过变量a这个路径 去找到obj对象的堆空间里面的值，进行修改。在我输出 a,b时，都是通过栈空间里面的这条路径，去找到堆空间里面的值，输出！

再看return示例

 var data=function(){
    return{
      name:"zhangsan",
      age:20
    }
  }
  var a=data();
  var b=data();
  a.age=18
  console.log(a,b)   //{name: "zhangsan", age: 18} {name: "zhangsan", age: 20}

这又是为什么呢？因为在JS 中只有函数才存在作用域,data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响！！

本文转载，原文来源于：https://www.cnblogs.com/banyuege/p/10723091.html