Vue.extend、Vue.component与new Vue

目录

vue.extend

Vue.component

new Vue

---

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实例，下面是三种API的区别：

vue.extend

特点：

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.component

特点：

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);
   //相当于 Vue.component('applecomponent', Vue.extend({ /* ... */ }))

	//方法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

new 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实例参数

vue.extend与vue.component的区别总结

在Vue.js中，Vue本身是一个constructor。

Vue.extend() 是一个继承于方法的 class，参数是一个包含组件选项的对象。它的目的是创建一个Vue的子类并且返回相应的 constructor。

而Vue.component()实际上是一个类似于Vue.directive() 和 Vue.filter()的注册方法，它的目的是给指定的一个constructor一个String类型的ID，

之后Vue.js可以把它用作模板，实际上当你直接传递选项给Vue.component()的时候，它会在背后调用Vue.extend()。

Vue.js支持两种不同的API模型：一种是基于类的，命令式的，Backbone 类型的API；另一种是基于标记语言的，声明式的，Web组件类型的API。

如果还是困惑的话，可以想象你是怎么创建通过new Image()或者 <img>标签创建 image元素的就知道了。

这两种方法都对指定的类型很有用，Vue.js提供这两者只是为了更好的灵活性。

下面看下vue.extend，new vue 和vue.component的区别

extend 是构造一个组件的语法器. 你给它参数 他给你一个组件 然后这个组件

你可以作用到Vue.component 这个全局注册方法里， 也可以在任意vue模板里使用apple组件

var apple = Vue.extend({ …. })  Vue.component(‘apple',apple)

你可以作用到vue实例或者某个组件中的components属性中并在内部使用apple组件

new Vue({ components:{ apple:apple } })

Vue.component 你可以创建 ，也可以取组件 例如下

var apple = Vue.component(‘apple') 

而new vue 是新建一个vue对象 所以可以理解为new vue < vue.extend < vue.component