组建中的data需要函数

学习的时候，听说这里是一个面试点，记录一下自己的理解

大家都知道在Vue实例中的data，我们可以直接返回一个对象的值，而不需要把data封装成一个函数，为什么组件中就需要把data封装成一个函数呢？

我们写项目的时候，一般只写一个vue实例，这意味着我们在整个项目中都是在这一个vue实例中进行的，所以我们改变vue实例中data值的时候，其他地方也都会改变。而组件不一样，我们写一个组件，更想让他能得到复用，所以我们会写多个组件的实例，这时候，我们要保证每个数据都是一个独立的，而不是相互关联的，所以这里我们把data封装成一个函数来解除他们之间的相互牵扯

为什么用data函数返回一个对象(不能在外边写好的)能够解除他们之间的关联呢？
我们看下边的例子：

//这个例子会发生连锁反应，因为他们共用一个data
const obj={
     name:'lihua'
   }
   function a(){
     return obj;
   }
   var obj1=a()
   console.log(obj1)
   obj.name='xiaoming'
   var obj2=a()
   console.log(obj2)
   var c=a()
   console.log(c）

//这样写能够消除他们之间的连锁反应，因为他们每一个实例都是对因一个新的对象
function a(){
     return {
       name:'lihua'
     }
   }
   var obj1=a()
   console.log(obj1)
   obj1.name='xiaoming'
   var obj2=a()
   console.log(obj2)
   var c=a()
   console.log(c)

在上边两个function的基础上，我们可以分析一下为什么组建中的data要使用一个函数并且返回的内容还是个对象。因为组件需要有自己的独立的封闭的空间，这样才能够使每一个组件都有自己独立的数据

下边写一个计数器的例子（老生常谈，但是关键要自己理解- -‘’）

//这个能够实现解除他们之间连锁的关系，每一个组件对象都有一个独立的封闭空间，这也是组件所追求的状态
<div id='app'>
  <cpn></cpn>
</div>
<template id='temp'>
  <div>
    <h2>当前数字{{counter}}</h2>
    <button @click=add>+</button>
    <button @click=sub>-</button>
  </div>
</template>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
   el:'#app',
   data:{

   },
   components:{
     cpn:{
       template:'#temp',
       data(){
         return{
           counter:0
         }
       },
       methods:{
         add(){
           this.counter++
         },
         sub(){
           if(this.counter==0){
              console.log('当前数字已经最小');
           }else{
             this.counter--
           }
           
         }
       }
     }
   }
 })
 </script>

和上边函数同样的道理，如果我们这里把data里边返回的对象是我们写好的对象（或者是直接返回一个变量，当然这里说不能直接返回一个变量的），那么这个时候所有组件都会共享一个数据

写在最后，记录学习~~~