vue组件的初步理解

我一直很疑惑，什么是组件。

首先看官方文档的介绍。啥？一大堆，反正我以前没有看懂。不过他有一句，--------》|所有的 Vue 组件同时也都是 Vue 的实例  
这句我懂了。 //1. 全局组件

vue的实例

那么也就是说，组件和new Vue（{}）出来的是一个东西。所以。组件里面也有 ，data, methods ，template,created. mounted, computed,components 这些选项对象和钩子函数然后，文档里面还有一句：
组件可以扩展 HTML 元素 这句什么意思？
我们组件里面有template属性，于是可以这样

template : ` <div id="box"> 我是一个div啊啊</div>`

这不，组件就能扩展html了吗？
再看看文档，看看有哪些方式能够定义组件。

//1. 全局组件
Vue.component('All',
{
data : function(){
return{}
},
methods: {
},
template :  ` <div  id="box"> 我是一个div啊啊</div>`,
components : {
}
}) //当然，还有很多属性computed，mounted我就不写了

//2. 局部组件 ，

var Child = {
template: '<div>我是局部组件。</div>'

}

那么最粗浅的理解，现在看来只要包含 data, template,created. mounted

还有对应扩展的html等一系列的东西，就可以称为vue组件。

组件一直都写在template里面不太好吧，万一多起来，岂不是要命。

//于是

<template id='local'>
<div>我是欢快的局部组件。</div>
</template>

var Local = {
data : function(){
return{}
},
template: '#local'
}

那么全局组件和局部组件有什么区别呢？

在一个项目里面，例如 局部组件B 比 全局组件 后定义 ，那么就能在这个 B组件 里面用全局组件

3.  Vue.extend({}) 这样定义的组件。好像已经不推荐使用了哦。