Vue mixns混合元件以及擴展元件extend

mixns

可以使用mixns將重用有狀態邏輯的程式碼載入，如果創建的 mixin 包含一個created生命週期並且組件本身也有一個，那麼這兩個函數都會被調用。

Mixin 鉤子按照它們提供的順序被調用，並且在組件自己的鉤子之前被調用。

官方表示不再推薦

在 Vue 2 中，mixin 是創建可重用組件邏輯塊的主要機制。雖然 Vue 3 繼續支持 mixin，但Composition API現在是組件之間代碼重用的首選方法。

特性

可以重複混合
生命週期可以重複觸發
同名變數，方法會被後者覆蓋

範例

const mixin1 = {
  data() {
    return {
      name: '混合的元件1'
    }
  },
  created() {
    console.log('混合的元件生命週期 1');
  }
}

const mixin2 = {
  data() {
    return {
      name: '混合的元件2'
    }
  },
  created() {
    console.log('混合的元件生命週期 2');
  }
}

createApp({
  created() {
    console.log('生命週期');
  },
  mixins: [mixin1, mixin2],
  mounted() {
    console.log(this.name);
  },
})

// => 混合的元件生命週期 1
// => 混合的元件生命週期 2
// => 生命週期
// => 混合的元件 2

extend

extend允許一個組件擴展另一個組件，繼承其組件選項。

extend與mixins實現功能滿相似的，mixins選項主要用於組合功能塊，而extends主要關注繼承。

特性

單一擴展
生命週期可以與mixins重複觸發
權重: 元件屬性 > mixins > extend
同名變數，方法依據權重決定

範例

const mixComponent = {
  data() {
    return {
      name: '混合的元件'
    }
  },
  created() {
    console.log('混合的元件生命週期');
  }
};
const extendComponent = {
  data() {
    return {
      name: '繼承的元件'
    }
  },
  created() {
    console.log('繼承的元件生命週期');
  }
};

createApp({
  created() {
    console.log('生命週期');
  },
  mixins: [mixComponent],
  extends: extendComponent,
  mounted() {
    console.log(this.name);
  },
})

// => 繼承的元件生命週期
// => 混合的元件生命週期
// => 生命週期
// => 混合的元件