我是怎么学会vue的16：为什么组件的data必须是函数

组件的数据定义在哪里

之前组件的数据都是写死在标签里的，现在我希望组件的数据可以动态变化：数据改变，组件的显示也随着变化。

组件的数据在哪里定义呢？

注册组件时，数据写在组件自己的data属性中。以全局组件为例，data是在注册组件的时候来指定的：

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>{{title}}</h2>
    <p>内容</p>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  // 注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        title: 'abc'     //全局组件的数据
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'  //vue实例的数据
    }
  })
</script>

为什么组件的数据需要保存在组件中，而不是保存在实例中？

因为一个实例有非常多的组件，如果所有的数据都放在vue实例中，那么vue的实例会非常臃肿，所有vue组件内部应该有自己保存数据的地方：保存在data属性中。

data属性必须是一个函数，且这个函数必须返回一个对象，对象内部保存数据。

为什么组件的data属性必须是函数？

案例：之前的计数器案例，把计数器封装成一个组件，用到的时候只需要引用标签即可。

<!--组件实例对象-->
<div id="app">
  <cpn></cpn> <!--一个cpn组件即是一个计数器-->
  <cpn></cpn> <!--创建了三个计数器-->
  <cpn></cpn> <!--思考：这三个组件实例对象，用的是否是同一个data对象？-->
</div>

<template id="cpn">
  <div>
    <h2>当前计数: {{counter}}</h2>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  // 1.注册组件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        counter:0
      }
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

解析：
三个组件，用的是否是同一个data对象？

不是。
因为data是一个函数，每次创建组件都会调data函数，且每次调用data函数的时候都会return一个新的对象。

data(){ }是function data(){ }的简写。

这里的三个组件，创建的时候调用了三次data函数，每次都return了一个新数据。这样三个数据分别占用了三个内存地址，互相就不影响了。

如果想让他们互相影响，应该怎么写呢？

  const obj = {
    counter: 0
  }
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return obj
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })

这样写的话，三个组件的数据指向的是同一个内存地址，修改其中一个组件，其他两个也会跟着变化。