组件--为什么组件中的data是一个函数？？？

首先，组件是用于代码的复用，提高代码的维护。在不同的页面，我们可能使用同一个组件，每个组件中有可能有相同的属性代码，我们操作这些属性来进行值的一些更改，例如下面的例子

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的时候，考虑到组件之间更改属性的过程中，如果直接更改属性会造成其他用到组件的地方因为前一个数据的变化，后面组件跟着变化的情况
  //干脆直接设计成为调用函数，每次调用的时候变量的引用都是不同的，这样每次在进行修改组件属性的时候，其他的组件属性不会发生更改

上面代码的效果图

image.png

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

image.png

当我点击加号的时候，这两个数字都进行了加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()方法，返回了三个对象，我要验证这三个对象是否是属于同一个，我将其中一个对象的属性改了，看其他对象的属性是否会跟着改变，答案我们可以看到，他们是不会改变的，如下

image.png

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

Snipaste_2020-06-04_08-41-37.png

来看一下他的反例

  //这里直接返回的是临时开辟的一块内存地址，而且地址不会发生改变
  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)

打印结果

image.png

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

image.png

那么也就解释了为什么data是一个函数，而不是一个对象，是对象的话，就直接返回的同一个内存地址，导致同一组件在不同地方使用，对象属性之间会产生影响。欢迎小伙伴儿指出我理解的不是很正确的地方，喜欢的话可以点赞支持一下，哈哈哈