vuejs之组件中的data为什么必须是函数

问题导入

组件可以访问Vue实例中的对象吗？

我们先来测试一下，看看组件中能否直接访问Vue实例中的data：

解析：组件去访问message，message定义在Vue实例的data中，页面最终并没有显示结果，（抛出错误：[Vue warn]: Property or method "message" is not defined）。

既然组件是一个单独功能模块的封装，有属于自己的html模板，那也应该有数据属性data。

尝试在组件注册函数，添加data：

控制台报错：

vue.js:634 [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. 

翻译过来意思是：“data”选项应该是在组件定义中返回每个实例值的函数。

从这里我们首先获得的信息：data在组件中必须是个函数，这点尤为关键，与Vue实例下的data不同。接着将data改为函数形式，并且返回一个对象，对象内部保存着数据。

多个组件实例是否共用一个data？ 

组件实例（对象）：每使用一次组件标签，就会创建相应的一个组件实例对象。

这个问题好比下图：

abc函数返回一个对象，当它被调用3次后，所返回的obj1，obj2，obj3三者是否一样？弄懂了这个问题，自然而然也就悟了。

验证：

 假设obj1，obj2，obj3内存中指向的是同一个对象，那么我修改了obj1.name，其余obj2,和obj3的name值也会随之变化。但输出结果两者的name并没有改变，这就足以说明每次调用abc函数，返回的对象都是互相独立的，没有任何引用关系。

如果是下面的情形，则每次返回的对象指向同一内存地址；

 因为返回的obj是变量名，保存一个对象的地址，而地址只有一个（与直接返回对象体有很大区别）。

Vue代码示例

<div id="app">
    <h2>data不使用函数</h2>
    <cpn1></cpn1>
    <cpn1></cpn1>
    <hr>
    <h2>data使用函数</h2>
    <cpn2></cpn2>
    <cpn2></cpn2>
    <hr>
  </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <template id="cpn1">
    <div>
      <button @click="count--">-</button>
      当前计数：{{count}}
      <button @click="count++">+</button>
    </div>
  </template>
  <template id="cpn2">
    <div>
      <button @click="count--">-</button>
      当前计数：{{count}}
      <button @click="count++">+</button>
    </div>
  </template>
  <script>
    const obj = {
      count:0
    };
    const app = new Vue({
      el: "#app",
      components: { //局部组件创建
        cpn1: {
          template: '#cpn1',
          data() {
            return obj;
          }
        },
        cpn2: {
          template: '#cpn2',
          data() {
            return {
              count: 0
            }
          }
        }
      }
    })
  </script>
</body>

效果如下：

 

总结

组件中的data写成函数形式：如果复用组件的话，它们并不是共享同一个对象，每次调用组件的时候，data属性都会return一个新的对象（函数在每次执行时都会创建一个新的栈空间，它们的内存地址都不一样），保证各个组件之间使用变量不会相互影响，组件复用也要考虑每个复用的地方有自己的逻辑。

一句话每个组件像人一样都需要有一片空间（data）来保存属于自己的状态。