[Vue]为什么组件的里的data需要写在函数中

经常使用vue的筒子们应该会发现，vue中的组件会是在一个函数中的，但是知道为什么会这样吗？
我们首先来看一下实例化一个vue的时候代码是怎么写的

var vm = new Vue({ //使用new Vue来实例化一个vue
  el:"#app", //挂载的dom节点；
  data:{ //绑定的数据
    message:"hello world",       
    item:{
      title:'课程',
      del:true
    }
  }
})

再来看看组件中的data是怎么写的呢？

Vue.component('todo-list',{
      template:"<ul>"+
        "<todo-item v-for='item in list' :title='item.title' :del='item.del' :sorce='item.sorce'></todo-item>"+
      "</ul>",
      data:function(){
        return {
          list:[ //需要声明的是数组用来循环
          {
            title:'语文',
            sorce:100,
            del:false
          },
          {
            title:'数学',
            sorce:100,
            del:false,
          },
          {
            title:'英语',
            sorce:100,
            del:true,
          },
          {
            title:'地理',
            sorce:100,
            del:true,
          },
          {
            title:'政治',
            sorce:100,
            del:true,
          }
        ]
        }
      },

不同的地方来了，为啥实例化的data直接是一个数组，而组件中的data是一个function，并且在data中又return了一个对象呢？这样不是多此一举吗？


因为组件要考虑到复用的问题，所以我们需要在function中return一个对象来保证这个对象是唯一的，是相互隔离不会被影响的，这样组件之间的数据才不会出错。
又因为我们在实例化vue的时候是直接挂载在一个固定的节点上的，不会出现复用的问题，所以不用如此操作。

化工泵
磁力泵
螺杆泵
离心泵

上海螺杆泵
上海离心泵
直埋全焊接球阀
埋地全焊接球阀
螺杆油泵

球阀厂
球阀
Fully Welded Ball Valve107
all Welded Ball Valve182