Vue组件data为什么必须是个函数，而Vue的根实例则没有此限制？Vue组件中data为什么必须是个函数，不能是个对象

<body>
  <div id="app">
    Hello World
    <comp></comp>
    <comp></comp>
    <p>counter -> {{number}}</p>
  </div>

  <script src="../../dist/vue.js"></script>
  <script>
     Vue.component('comp',{
       template:'<div @click="counter++"></div>',
       data:{
          counter:1
       }
     })

    const vm = new Vue({
      el: '#app',
      data:{
        number:1
      }
    })
  </script>

可通过源码找到答案: src\core\instance\state.js - initData()

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

总结:

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