vue.extend與vue.component

Vue.extend 返回的是一個Vue實例構造器。

這里只是構造完成 但是還沒有實例化所以還不是一個組件

var myVue = Vue.extend({
// 預設選項
})

上面這個 預設選項 可以是Vue所有實例選項 比如 data () {} ,methods: {}, created: {}

 

現在就是一個vue組件了

var vm = new myVue({
// 其他選項
})

上面這個其他選項可以是 new Vue({})里面的所有屬性選項 比如 data () {} ,methods: {}, created: {}。

new myVue({})后會合並預設選項和其他選項中的所有屬性選項：

1.data數據對象在內部會進行淺合並 (一層屬性深度)。

2.鈎子函數會先執行預設選項中的

3.值為對象的選項，例如 methods, components 將被混合為同一個對象，兩個對象鍵名沖突時，會以new myVue({})對象的選項為准。

注意：混入 (mixins) 也使用同樣的策略進行合並。

 

Vue.component 是用來全局注冊組件的方法

其作用是將通過 Vue.extend 生成的擴展實例構造器注冊為一個組件，

會自動調用類似於 new myVue 這樣的構造函數來生成組件實例，並掛載到自定義元素上。

方法1：全局注冊

Vue.component('myVue',myVue) 

方法2：內部注冊

可以在某個組件中的components屬性中注冊並使用組件

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