Vue3 外掛開發詳解嚐鮮版

linshuai發表於2020-05-27
Vue

前言

vue3.0-beta 版本已經發布了一段時間了，正式版本據說在年中釋出（直播的時候說的是年中還是年終，網上傳聞說是6月份）。嘴上說著學不動，身體卻很誠實地建立一個vue3的專案，興致勃勃地引入 vue2 外掛的時候，眉頭一皺，發現事情並沒有那麼簡單。

瀏覽器無情地丟擲了一個錯誤：

Uncaught TypeError: Cannot set property '$toast' of undefined

不是說相容vue2的寫法嗎，外掛不相容，這是鬧哪樣？發下牢騷之後還是得解決問題。研究外掛的程式碼，是這麼實現的

var Toast = {};
Toast.install = function (Vue, options) {
    Vue.prototype.$toast = 'Hello World';
}
module.exports = Toast;

vue2 外掛的時候會暴露一個 install 方法，並通過全域性方法 Vue.use() 使用外掛。install 方法的第一個引數是 Vue 構造器，外掛的方法就新增在 Vue 構造器的原型物件上。通過 new Vue() 例項化後，在元件中就能呼叫 this.$toast 使用元件了。（具體實現可以參考我之前的一篇文章：Vue.js 外掛開發詳解，下面也是基於這個外掛demo對比修改）。

而 vue3 的 install 方法不是傳入 Vue 構造器，沒有原型物件，Vue.prototype 是 undefined，所以報錯了。vue3 採用依賴注入的方式，在外掛內部利用 provide 和 inject 並暴露出一個組合函式，在元件中使用。

外掛實現

基本框架

下面先實現一個外掛的基本框架。

import { provide, inject } from 'vue';
const ToastSymbol = Symbol();     // 用Symbol建立一個唯一標識，多個外掛之間不會衝突
const _toast = () => {}        // 外掛的主體方法
export function provideToast(config) {    // 對外暴露的方法，將 _toast 方法提供給後代元件
    provide(ToastSymbol, _toast);
}

export function useToast() {    // 後代元件可以從該方法中拿到 toast 方法
    const toast = inject(ToastSymbol);
    if (!toast) {
        throw new Error('error');
    }
    return toast;
}

元件使用

在 provideToast 方法中，提供了 _toast 方法，那在根元件中 呼叫 provideToast 方法，傳入外掛引數，子元件中就能使用 toast 功能了。

// app.vue 根元件
import { provideToast } from 'vue2-toast';
export default {
    setup() {
        provideToast({
            width: '200px',        // 配置toast寬度
            duration: 2000        // 配置toast持續顯示時長
        });
    }
};

在 useToast 方法中，返回了 toast 方法，那在所有的後代元件中呼叫 useToast 方法，就能拿到 toast 方法了。

// child.vue 子元件
import { useToast } from 'vue2-toast';
export default {
    setup() {
        const Toast = useToast(); // 所有的子元件都要從useToast拿到toast方法
        Toast('Hello World');
    }
};

資料響應

想要控制 toast DOM 元素的顯示隱藏，以及提示文字的變化，需要建立響應式的資料，在 vue3 中可以通過 reactive 方法建立一個響應式物件。

const state = reactive({
    show: true,        // DOM元素是否顯示
    text: ''    // 提示文字
});

掛載DOM

在頁面中顯示一個 toast，那就免不了要建立一個 DOM 並掛載到頁面中。在 vue2 中是通過Vue.extend 建立一個子類，將子類生成的例項掛載到某個元素中，而 vue3 中通過 createApp 方法來實現的。

const _toast = text => {
    state.show = true;
    state.text = text;
    toastVM = createApp({
        setup() {
            return () =>
                h('div', {
                    style: { display: state.show ? 'block' : 'none' }    // display 設定顯示隱藏
                },
                state.text
            );
        }
    });
    toastWrapper = document.createElement('div');
    toastWrapper.id = 'toast';
    document.body.appendChild(toastWrapper);  // 給頁面新增一個節點用來掛載toast元素
    toastVM.mount('#toast');
};

完整示例

上面的每一步是這個外掛的關鍵內容，接下來就是完善下細節，比如使用者配置外掛的全域性引數，設定 toast 的樣式，持續時間，顯示位置等，這裡就不一一細講了，完整示例如下：

import { provide, inject, reactive, createApp, h } from 'vue';
const ToastSymbol = Symbol();

const globalConfig = {
    type: 'bottom', // toast位置
    duration: 2500, // 持續時長
    wordWrap: false, // 是否自動換行
    width: 'auto' // 寬度
};

const state = reactive({
    show: false, // toast元素是否顯示
    text: ''
});

let [toastTimer, toastVM, toastWrapper] = [null, null, null];

const _toast = text => {
    state.show = true;
    state.text = text;
    if (!toastVM) {
        // 如果toast例項存在則不重新建立
        toastVM = createApp({
            setup() {
                return () =>
                    h(
                        'div',
                        {
                            // 這裡是根據配置顯示一樣不同的樣式
                            class: [
                                'lx-toast',
                                `lx-toast-${globalConfig.type}`,
                                globalConfig.wordWrap ? 'lx-word-wrap' : ''
                            ],
                            style: {
                                display: state.show ? 'block' : 'none',
                                width: globalConfig.width
                            }
                        },
                        state.text
                    );
            }
        });
    }

    if (!toastWrapper) {
        // 如果該節點以經存在則不重新建立
        toastWrapper = document.createElement('div');
        toastWrapper.id = 'lx-toast';
        document.body.appendChild(toastWrapper);
        toastVM.mount('#lx-toast');
    }
    if (toastTimer) clearTimeout(toastTimer);
    // 定時器，持續時長之後隱藏
    toastTimer = setTimeout(() => {
        state.show = false;
        clearTimeout(toastTimer);
    }, globalConfig.duration);
};

export function provideToast(config = {}) {
    for (const key in config) {
        globalConfig[key] = config[key];
    }
    provide(ToastSymbol, _toast);
}

export function useToast() {
    const toast = inject(ToastSymbol);
    if (!toast) {
        throw new Error('error');
    }
    return toast;
}

總結

與 vue2 的外掛比較大不同點在於，需要用到 toast 的每個元件中，都需要引入 useToast 方法，看起來會有點麻煩。不過其實這也是 vue 組合式 API 的目的，讓程式碼更可讀、更容易被理解，清楚的知道這個方法就是來自這裡。正如標題所示，這是嚐鮮版，vue3 正式版還未釋出，未來會不會有更多的外掛形式，咋也不敢問，至少這種還是比較穩的。

相關文章