vue.extend與vue.component的區別和聯系

如果大家只顧開發，對基礎知識不了解，在今后的解決問題過程中，也是個大問題，今天小編抽空對基礎概念給大家屢一下，用于大家日后學習。

Vue.extend({})簡述：使用vue.extend返回一個子類構造函數，也就是預設部分選項的vue實例構造器。

后可使用vue.component進行實例化、或使用new extendName().$mount(''+el)方式進行實例化（從而實現模擬組件）。

Vue.component({})簡述：不多介紹了。。。用于生成全局組件

使用：

　　1，Vue.component使用Vue.extend生成的構造函數：

　　2，實例化構造函數從而模擬組件：

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