在Vue中，mixins和extends是兩個十分常用的選項，它們旨在幫助程序員創建可以共用的代碼。雖然兩者看起來很相似，但是它們各有不同的作用。在這篇文章中，我們將會對mixins和extends進行詳細比較，以便更好地理解它們的用法和區別。
mixins: []
在Vue中，mixins是一個選項名字，表示你想混入其他Vue實例。它是一個數組，可以有多個元素，每個元素都是一個混入對象。混入對象可以包括如data、methods、computed等Vue選項。當組件使用了混入對象時，混入對象中的選項將被 “混合” 到組件自身的選項中，優先級如下：
- 組件本身的data選項。
- 混合對象的data選項。
- 組件本身的methods選項。
- 混合對象的methods選項。
- 組件本身的computed選項。
- 混合對象的computed選項。
另外，如果混入對象中包含相同名字的生命周期方法或鉤子函數，它們將會與組件自身的同名方法或鉤子函數進行合并。Vue會使用一定的策略比如兩個鉤子函數的執行時機會根據它們的特點來進行決定。
extends: {}extends是Vue組件中的一個選項名字，當你需要擴展一個組件時，就可以在 extends 選項中指定基礎組件。例如：
var Base = {
data: function () {
return { message: 'Hello world' }
}
}
var Extended = {
extends: Base,
created: function () {
console.log(this.message) // "Hello world"
}
}在這個例子中，我們定義了一個名為Base的組件，它指定了一個名為message的data屬性。然后，我們在一個名為Extended的組件中，使用extends將Base組件指定為基礎組件。這樣，在Extended組件中，就會擁有Base組件中定義的data屬性和方法。在構造函數中，我們可以通過this.message來訪問這個數據的值。
總結：
在Vue中，mixins和extends都是用來共享一些可復用的選項和邏輯的。當你需要將某些可復用的數據或方法或生命周期函數組合起來使用時，應該使用mixins。而當你需要擴展一個組件時，或者需要創建一個可以重寫某些選項的組件時，應該使用extends。了解這兩個選項的用法和區別，可以幫助你更好地編寫Vue組件。
上一篇vue mint懶加載
下一篇vue 的雙向綁定