vue vue3 mixins composition api 前端 web

共用方法-vue mixins 與 vue3 composition api 簡介

Media Deng 2021/06/24 09:00:00
133

在Vue的專案中,當組件有一些常用的方法,會一直不停出現,這時就可以獨立抽出放在mixins,避免重複出現。

Mixins

Mixins為Vue組件共用方法。對象可以包含任何組件選項(生命週期、data、computed...)。當組件使用mixins時,mixins中的所有選項都將"混合"到組件自己的選項中。

基本使用 (局部)
在mixin資料夾中,新增counter.js

counter.js 中程式碼

const mixin = {
    data() {
        return {
        countMixin: 0
        };
    },
    methods: {
        incrementMixin() {
        this.countMixin++;
        }
    }
}

然後我們在 App.vue 使用 mixins 來混入 counter:

<template>
  <h1>{{ "Hello Vue2 Mixin" }}</h1>
  <p>{{ countMixin }}</p>
  <button @click="incrementMixin">incrementMixin</button>
</template>

<script>
import counter from "./mixin/counter";

export default {
  mixins: [counter],
}
</script>

檢視頁面效果如下:

從圖片結果可看出共用function成功被觸發

 

選項合併

當組件和mixin對象含有同名選項時,這些選項將以恰當的方式進行合併。

比如,數據對象在內部會進行遞歸合併,並在發生衝突時以組件數據優先。

counter.js 中程式碼

const mixin = {
  data: function () {
    return {
      message: 'Mixins',
      foo: 'mixins裡面'
    };
  }
}

App.vue中程式碼

<script>
import counter from "./mixin/counter";

export default {
  mixins: [counter],
  data() {
    return {
      message: 'Vue實例',
      bar: 'vue裡面'
    }
  },
  created() {
    console.log(this.$data) // => { message: "Vue實例", foo: "mixins裡面", bar: "vue裡面" }
  }
}
</script>

檢視頁面效果如下:

由此可看見,使用mixins混入都有message但因為命名衝的關係,會以組件數據優先,所以message的值為Vue實例。

 

全局混入

不需要使用 mixin 引入 組件 即可使用。

一般不推薦使用,因為不易維護。

import Vue from 'vue';
export default Vue.mixin({
   data() {
        return {
        countMixin: 0
        };
    },
    methods: {
        incrementMixin() {
        this.countMixin++;
        }
    }
})

 

mixin性質:

1. 組件的data、methods 優先級會高於mixin 的 data、methods。

2. 生命週期會先執行mixin裡的,再執行組件裡的。

3. 自定義的屬性,組件屬性優先級高於mixin屬性。

 

 

 

Composition API

Composition API的主要概念,重新定義 setup 函式返回的JavaScript變數,而不是將元件的功能(例如state、method、computed等)定義為物件屬性。

那要如何使用共用function呢?(以計算方式舉例)

首先在utils資料夾中,新增useCounter.js

useCounter.js中的程式碼

import { ref, computed } from "vue";

export default function () {
  const count = ref(0);
  const double = computed(() => count.value * 2)
  function increment() {
    count.value++;
  }
  return {
    count,
    double,
    increment
  }
}

從程式碼可看出,引入了ref及comuted方法。

ref 是用來處理基礎型數值(字串,數值...),並且回傳一個響應式的物件,物件中,提供value屬性,透過value更新或讀取數值。

 const count = ref(0);
 console.log('count', count.value); // count.value輸出為0

 

computed 與vue2.x用法相同,為計算屬性,依據相依的資料改變時再做計算而computed()參數為一個getter函式,回傳ref物件,當在JavaScript存取computed值時,也需用.value來改變其值。

const double = computed(() => count.value * 2)

以上程式碼可見setup方法可以藉由ref替換調原vue2.x的data(){}方法

 

而要在組件中如何使用useCounter.js中的功能?只需將模塊導入到組件中並調用它(利用setup()函式)。這將返回我們定義的變量,就可以從設置函數中返回它們。

App.vue中程式碼

<template>
  <h1>{{ "Hello Vue3 !!" }}</h1>
  <p>{{ count }}</p>
  <p>{{ double }}</p>
  <button @click="increment">測試1</button>
</template>

<script>
import useCounter from "./utils/useCounter";

export default {
  // setup()在created 實例被完全初始化之前,所以this還沒被創建,在此無法使用(包含生命週期函數,但生命週期函數可藉由this.$option.setup()調用setup函數)
  setup() {
    const { count, double, increment} = useCounter();
    return {
      count,
      double,
      increment
    }
  },
}
</script>

檢視頁面效果如下:

而Composition API是依靠原生 JavaScript 原則來共享程式碼,像是將變量傳遞給函數及模塊系統。因此mixin中的命名衝突及維護不易問題就可以被解決,所以當你需要共用方法時,目前建議使用vue3中的Composition API,因為它的特性使得mixin中的問題迎刃而解。

 

Media Deng