从源码中得到答案之Vue组件data为什么必须是个函数而Vue的根实例则没有此限制采用函数形式顶一，在initData时

源码路径 src\core\instance\state.js - initData()

函数每次执行都会返回全新data对象实例

测试代码如下

<!DOCTYPE html>
<html>
  <head>
    <title>Vue事件处理</title>
  </head>
  <body>
    <div id="demo">
      <h1>vue组件data为什么必须是个函数?</h1>
      <comp></comp>
      <comp></comp>
    </div>
    <script src="../../dist/vue.js"></script>
    <script>
      Vue.component("comp", {
        template: '<div @click="counter++">{{counter}}</div>',
        data: { counter: 0 },
      }); 
      // 创建实例
      const app = new Vue({
        el: '#demo',
      });
    </script>
  </body>
</html>

程序无法通过vue检测

结论：

Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的
采用函数形式顶一，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。
在Vue根实例创建过程中不存在该该限制，也是因为根实例只能有一个，不需要担心这种情况