vue vue3 mixins composition api 前端 web

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

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

0 7339

在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>

檢視頁面效果如下：