vue构造、vue组件和vue实例这三个是不同的概念，它们的关系有点类似于Java的继承概念：
关系：vue构造->vue组件->vue实例
也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件。在大型项目中，用过java开发的都知道，继承是非常重要的，前端也一样。我们先看看他们之间的实现代码区别：
<script>
//vue构造
Vue.extend({
props: [],
data: function() {
return {}
},
template: ""
});
//vue组件
Vue.component("mycomponent", {
props: [],
data: function() {
return {}
},
template: ""
});
//vue实例
new Vue({
el: "",
data: {}
});
</script>
从上面的代码可以看出，vue构造和vue组件所需的部分初始化结构参数是一样的，这意味着vue实例可以直接跳过vue组件直接使用vue构造对自身组件初始化，也就是vue构造->vue实例，下面请看三种用法的关联性。
vue构造
特点：
1.只能通过自身初始化结构
使用范围：
1.挂载在某元素下
2.被Vue实例的components引用
3.Vue.component组件引用
<div id="app2"></div>
<script>
var apple = Vue.extend({
template: "<p>我是构造函数创建：自身参数：{{a}}|外部传参：{{b}}</p>",
data: function() {
return {
a: "a"
}
},
props: ["b"]
});
//挂载构造函数
new apple({
propsData: {
b: 'Vue.extend'
}
}).$mount('#app2');
</script>
运行结果：
我是构造函数创建：自身参数：a|外部传参：Vue.extend。
vue组件
特点：
1.可通过自身初始化组件结构
2.可通过引入Vue.extend初始化组件结构
3.可通过第三方模板temple.html初始化组件结构
使用范围：
任何已被vue初始化过的元素内
<div id="app3">
<applecomponent v-bind:b="vparam"></applecomponent>
<mycomponent v-bind:b="vparam"></mycomponent>
<templecomponent v-bind:b="vparam"></templecomponent>
</div>
<script>
//方法1 引入构造
Vue.component('applecomponent', apple);
//方法2 自身创建
Vue.component("mycomponent", {
props: ["b"],
data: function() {
return {
a: "a"
}
},
template: "<p>我是vue.component创建 自身参数：{{a}}|外部传参：{{b}}</p>"
});
//方法3 第三方模板引入,可参照上一篇文章
Vue.component('templecomponent', function(resolve, reject) {
$.get("./../xtemplate/com.html").then(function(res) {
resolve({
template: res,
props: ["b"],
data: function() {
return {
a: "a"
}
}
})
});
});
var app3 = new Vue({
el: "#app3",
data: {
vparam: "Vue.component"
}
});
</script>
运行结果：
我是构造函数创建：自身参数：a|外部传参：Vue.component
我是vue.component创建 自身参数：a|外部传参：Vue.component
我是导入模板 自身参数：a|外部入参：Vue.component
vue实例
（注）this.$options.key表示其自定义属性值,this.$??表示系统属性值,如this.$el
特点：
1.可以通过自身components引用Vue.extend构造,通过自身data向构造传参
2.可以通过自身components引用组件模板，通过自身data向组件传参
使用范围：
1.仅限于自身
<div id="app1">
<dt1></dt1>
<vueapple v-bind:b="msg"></vueapple>
</div>
<script type="text/x-template" id="dt1">
<div>这里是子组件1</div>
</script>
<script>
new Vue({
el: "#app1",
data: {
msg: "vue实例参数"
},
components: {
dt1: {
template: "#dt1"
},
vueapple: apple //引入构造
}
});
</script>
运行结果：
这里是子组件1
我是构造函数创建：自身参数：a|外部传参：vue实例参数 本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
