vue.extend和vue.component的区别
vue.extend
使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个“子类”(构造器)。参数是一个包含组件选项的对象。
const Sub = function VueComponent (options) {
this._init(options)
}
Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
vue.component
注册或获取全局组件。注册还会自动使用给定的id
设置组件的名称。内部实质上调用了vue.extend,最后返回"子类"(构造器),这个子类构造器。
vue.component方法的定义中有如下代码:
// 此处 this 是 Vue ; this.options._base也是Vue ;相当于Vue.extend
definition = this.options._base.extend(definition)
...
return definition
综合例子如下:
var Component1 = Vue.component('any',{
template:'<div>Component1</div>'
})
var Component2 = Vue.extend({
template:'<div>Component2</div>'
})
console.log(Component1);
console.log(Component2);
var App = Vue.extend({
components:{Component1,Component2},
data() {
return {
a: 12
}
},
template: `<div>
{{this.a}}
<any/>
<Component1/>
<Component2/>
</div>`,
})
new Vue({
render(h){
return h(App)
}
}).$mount('#app')
- 通过components注册了一个全局any组件,可以在App中直接使用。
- Component1和Component2这两个构造函数通过局部注册之后,也可以在App中使用
components:
单文件vue中经常会通过import引入其他组件,然后在本组件中注册和使用,代码:
<template>
<Icon/>
</template>
<script>
import Icon from './icon.vue'
console.log(Icon)
export default {
components:{Icon}
}
</script>
打印Icon,发现Icon是一个对象,既可以是对象也可以是函数,Vue内部是如何处理的呢?
在vue内部创建虚拟dom的时候有如下的代码:
if (isObject(Ctor)) {
Ctor = baseCtor.extend(Ctor)
}
此处的Ctor对应着上面的Icon,当判断是对象的时候会调用extend方法,也就是vue.extend方法,返回一个子类
构造函数,殊途同归。