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对象