01-vue中的组件为什么是返回函数

大前端 Vue 内存地址引用 js原型链

发布时间 : 2020-07-06 23:51

字数:865 阅读 :

组件中的data属性为什么返回值是一个函数，而不是对象
1. 1.组件是高可复用性的
2. 2例子如下

组件中的data属性为什么返回值是一个函数，而不是对象

1.组件是高可复用性的

1.1 如果组件中的data返回的是一个对象，那么其他地方在使用这个组件进行传值的时候，因为传递进来的是一个值引用，而不是一个具体的对象，js中传递的全部是引用，没有达到组件数据的隔离的效果，导致一处数据发生改变，用过相同组件的地方也会产生相应的变化，这是我们不希望发生的。例如下面的例子

2例子如下

const obj = {
    count:0
  }
  //注册并挂载到全局的Vue上
  Vue.component('spn',{
    template:`#mycpn`,
    data(){
      return obj
    },
    methods:{
      increment(){
        this.count++
      },
      decrement(){
        this.count--
      }
    }
  })
  let app = new Vue({
    el: "#app",
  })
  //在设计这个vue的时候，考虑到组件之间更改属性的过程中，如果直接更改属性会造成其他用到组件的地方因为前一个数据的变化，后面组件跟着变化的情况
  //干脆直接设计成为调用函数，每次调用的时候变量的引用都是不同的，这样每次在进行修改组件属性的时候，其他的组件属性不会发生更改

上面代码的效果图

上面代码当我点击加号或者减号会出现什么样的结果呢，如下

当我点击加号的时候，这两个数字都进行了加1操作，这是我们希望看到的吗，实际工作中我们也是不希望有这样的事儿发生，因为组件是相对封闭的一个空间，他自己里面执行的逻辑不能被其他引用了该组件的操作所影响，那么我们就来研究一下为什么会发生这样的情况。

首先我们来看一个js代码

  function getMsg(){
    return {
      name:"cxy",
      age:18
    }
   }

 let obj1 = getMsg();
 let obj2 = getMsg();
 let obj3 = getMsg();

 obj1.name="coder"
  console.log(obj1.name)
  console.log(obj2.name)
  console.log(obj3.name)

我调用了三次getMsg()方法，返回了三个对象，我要验证这三个对象是否是属于同一个，我将其中一个对象的属性改了，看其他对象的属性是否会跟着改变，答案我们可以看到，他们是不会改变的，如下

这到底是什么原因呢？理解这个问题，我们要首先了解内存模型，在进行方法调用返回对象的时候，每次返回的对象都是从栈空间里面创建的临时变量，也就是一个内存地址，如下

来看一下他的反例

  //这里直接返回的是临时开辟的一块内存地址，而且地址不会发生改变
  const msg = {
    name:"cxy",
    age:18
  }

  function getMsg(){
    return msg;
  }

 let obj1 = getMsg();
 let obj2 = getMsg();
 let obj3 = getMsg();

 obj1.name="coder"
  console.log(obj1.name)
  console.log(obj2.name)
  console.log(obj3.name)

打印结果

这又是为什么呢？请看下图