解答为什么VUE组件里的data必须是个函数

很多小伙伴可能不清楚为什么VUE组件中data只能是函数，而不能用对象，那么我就在此解答一下
下面是大家平时用VUE组件的时候的data展现 ↓↓↓

Vue.component('ProductItem'),{
  template:`
  <div class='num-item'>
    <p>数值： {{num}} </p><button @click='addNum'>点击++</button>
  </div>,
  data(){
    return {
      num:1
    }
  },
  methods:{
    addNum(){
      this.num++
    }
  }
})

区别在于函数与对象之间数据的存放

传统分类通过存储位置 把数据类型分为 基础类型 和 引用类型
而对象属于引用类型

不同于其他基础类型，对象的数据储存位置不在栈内存中，而在堆内存中，栈内存中只储存相对应的指针，指向堆内存中的地址

下面举个例子：

let obj = {
  a:1
}

function add(o){
  o.a++
  console.log(o.a)
}

add(obj)//2
add(obj)//3
add(obj)//4

调用多次结果会叠加的原因是obj是引用类型，add（）函数三次全部操作的都是全局作用域下的obj对象，给 obj 里面的 a 进行增量。

function createObj(){
  return{
    a:1
  }
}

function add(o){
  o.a++
  console.log(o.a)
}

add(createObj())//2
add(createObj())//2
add(createObj())//2

这里的结果为什么都是2呢，是因为这里add（）函数处理的是由函数createObj return出来的对象，这三个对象长得一样，但是他们存放数据的地址不同，所以在调用函数add（）对其中数据进行处理的时候，是分别对三个对象中的数据进行处理，是具有独立性的。

回到最上面的问题，为什么VUE组件里的data必须是个函数 ？？？

因为组件需要复用！！！
如果使用对象的话，当某一次对组件进行数据上的操作的时候，会影响到其他使用这个组件的地方，造成变量污染，违背了组件高内距低耦合的性质。

---

以上就是个人经验的总结,如果还有什么问题欢迎评论提问, 或者查看其他答主更加优秀的讲解

作者：Hi_Akai，转载请注明出处！！！