[Vue] 進階API-元件的Mixins / Extends

TL;DR

參考資料

相關連結

• Options API:mixins | Official API
• Options API:extends | Official API

---

Mixins

語法

html(#app)

<div id="app">
  <div class="p-5">
    <h2>單一混合</h2>
    <card></card>
  </div>
</div>

vue

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

app.component('card', {
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  created() {
    console.log('card 的元件生命週期')
  },
  mixins:[mixComponent1]
})

app.mount('#app');

混合的特點

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

混合多個元件

html(#app)

<div id="app">
  <div class="p-5">
    <h2>單一混合、多個混合</h2>
    <card class="my-2"></card>
    <card2 class="my-2"></card2>
    <card3 class="my-2"></card3>
  </div>
</div>

vue

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


const app = Vue.createApp({});

app.component('card', {
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  created() {
    console.log('card 1 的元件created生命週期')
  },
  // 依照混入(mixins)陣列內的元件順序來決定優先權
  // 後面混入的會覆蓋前面混入的資料，生命週期也會依序觸發
  mixins:[mixComponent1,mixComponent2]
})

app.component('card2', {
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  created() {
    console.log('card 2 的元件created生命週期')
  },
  // 依照混入(mixins)陣列內的元件順序來決定優先權
  // 後面混入的會覆蓋前面混入的資料，生命週期也會依序觸發
  mixins:[mixComponent2,mixComponent1]
})

app.component('card3', {
  data(){
    return{
      name:'card3的name'
    }
  },
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  created() {
    console.log('card 3 的元件created生命週期')
  },
  // 依照混入(mixins)陣列內的元件順序來決定優先權
  // 後面混入的會覆蓋前面混入的資料，生命週期也會依序觸發
  mixins:[mixComponent2,mixComponent1]
})

app.mount('#app');

console

混合多個元件的特性

生命週期

• mixins生命週期的執行順序：依照mixins傳入的陣列順序依序執行
• 元件本身的生命週期與mixins的生命週期順序：先執行mixin的生命週期，再執行元件的生命週期

---

資料內容

• 複數mixins資料的覆蓋性：(如果狀態名稱相同則)後面的mixins覆蓋前面的mixins
• 元件與mixins資料的覆蓋性：(如果狀態名稱相同則)元件覆蓋mixins的資料內容

Extends

語法

html(#app)

<div id="app">
  <div class="p-5">
    <h2>單一擴展</h2>
    <card></card>
  </div>
</div>

vue

const extendComponent1 = {
  data() {
    return {
      name: '擴展的元件'
    }
  },
  created() {
    console.log('擴展的元件生命週期');
  }
};

const app = Vue.createApp({});

app.component('card', {
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  created() {
    console.log('card 的元件生命週期')
  },
  // 擴展直接帶入物件，故只能做到單一擴展，無法擴展多個
  extends:extendComponent1
});

app.mount('#app');

info

• 擴展直接帶入陣列，故只能擴展一個。
• 生命週期與mixins相同，可以觸發

比較Mixins & Extends

html(#app)

<div id="app">
  <div class="p-5">
    <h3>權重</h3>
    <card2></card2>
  </div>
</div>

vue

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


const app = Vue.createApp({});

app.component('card', {
  template: `<div class="card">
    <div class="card-body">{{ name }}</div>
  </div>`,
  created() {
    console.log('card 的元件生命週期')
  },
  // 擴展直接帶入物件，故只能做到單一擴展，無法擴展多個
  extends:extendComponent1
});

app.component('card2', {
  template: `<div class="card">
      <div class="card-body">{{ name }}</div>
    </div>`,
  data() {
    return {
      name: '元件資料狀態',
    }
  },
  mixins: [mixinComponent],
  extends: extendComponent1,
  created() {
    console.log('card 的元件生命週期')
  }
});

app.mount('#app');

console

	extends	mixins	元件
可否重複混入	不可	可	N/A
混入形式	陣列	單一物件	N/A
生命週期執行優先權	最早執行	次之	最晚執行
資料覆蓋優先權	優先權最低	優先權次之	優先權最高

資料覆蓋優先權：需要具有相同名稱的前提時，高優先權覆蓋低優先權