Vue学习记录-组件data必须是函数

<div id="app">
   <cpn></cpn>
   <cpn></cpn>
  </div>
  <script src="../js/vue.js">
  </script>
  <!-- 模版 -->
  <template id="cpn"> 
    <div>
      <h1>{{title}}</h1>
      <p>正文</p>
    </div>
  </template>
  <script>

    Vue.component('cpn',{  //注册全局组件
      template: "#cpn",
      data(){
        return {
          title: "标题"
        }
      }
    })
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        }
     })
  </script>

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

当创建多个组件实例时，每个组件的data为函数即时return的新对象

这样避免多个组件共享一个data对象