为什么组件data必须是函数?

一、组件可以访问Vue实例数据吗? (不可以)
(1).组件是一个单独功能模块的封装:
这个模块有属于自己的HTML模板,也应该有属于自己的数据data.
(2).组件中的数据是保存在哪里呢?顶层的Vue实例中吗?
发现不能访问,而且即使可以访问,如果将所有的数据都放在Vue实例中,Vue实例就会变得非常 臃肿.
结论: Vue组件应该有自己保存数据的地方.

二、组件自己的数据存放在哪里呢?
(1).组件对象也有一个data属性(也可以有methods等属性)
(2).只是这个data属性返回一个对象,对象内部保存着数据
(3).而且这个函数返回一个对象,对象内部保存着数据

 data(){
     
     return{
     

     }
  }

三、结论
根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。
采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象

问题： 为什么data要定义为一个函数？
(1). 组件是一个独立的个体，那么它应该拥有自己的数据，这个数据应该是一个独立的数据
(2). 也就是说这个数据应该有独立作用域，也就是有一个独立的使用范围，这个范围就是这个组件内
(3). js的最大特征是：函数式编程 ， 而函数恰好提供了独立作用域

问题： 为什么data要有返回值？返回值还是一个对象？
(1). 因为Vue是通过observer来观察data选项的，所有必须要有返回值
(2). 因为Vue要通过es5的Object.defineProperty属性对对象进行getter和setter设置

注意: 不希望连锁反应,不会让别的值改变

  <div>
     <h2>当前计数: {
     {
     count}}</h2>
     <button @click="add">+</button>
     <button @click="edit">-</button>
  </div>
  (1). const obj={
     
       count:0
     }
     Vue.component('cpn',{
     
        template:'#cpn',
        data(){
     
        return obj
      },
      methods:{
     
         add(){
     
            this.count++
         },
         edit(){
     
            this.count--
         }
      }
     })

  (2). Vue.component('cpn',{
        -- 推荐
             template:'#cpn',
             data(){
     
             return{
     
                count:0
             }
           },
           methods:{
     
              add(){
     
                 this.count++
              },
              edit(){
     
                 this.count--
              }
           }
          })