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方法，返回一個子類建構函式，殊途同歸。