如何实现 vue setup 中使用小程序特有生命周期钩子？

需求

为了让小程序特有的生命周期钩子能够像 onBeforeMounte、onMounted 一样在 setup 里使用。

比如：

import { onMounted } from '@vue/composition-api'

export default {
    setup() {
        onMounted(() => {
            console.log('组件挂载完成了')
        })
        
        // 但是却没有这种生命周期钩子
        // 因为一般都是写在与 setup 同级的位置中
        /**
        
        onOnLoad(() => {
            consoloe.log('小程序页面首次加载时执行')
        })
        
        */
    },
    // 一般都是写在与 setup 同级的位置中
    onLoad(e) {
        consoloe.log('小程序页面首次加载时执行')
    }
}

实现

实现其实很简单，只需要一个文件就可以了。

首先定义一个文件，可以命名为addLifeCycle.js

import { getCurrentInstance } from '@vue/composition-api';
import Vue from 'vue';

function createUseOn(name) {
  return (fun) => {
    // getCurrentInstance().proxy 相当于 vue2 中的 this
    const vm = getCurrentInstance().proxy;
    // 这里之所以不用$once，是因为如果是 onShow，onShow 可能会触发多次。
    vm.$on(`hooks:${name}`, fun);
    // vue 内部会触发一个名为 hook:beforeDestroy 的钩子，触发时机在组件实例销毁之前。
    vm.$on('hook:beforeDestroy', () => vm.$off(`hooks:${name}`, fun));
  };
}

export const useOnShow = createUseOn('onShow');

export const useOnHide = createUseOn('onHide');

export const useOnLoad = createUseOn('onLoad');

export const useOnReady = createUseOn('onReady');

export const useOnUnload = createUseOn('onUnload');

export const useOnPullDownRefresh = createUseOn('onPullDownRefresh');

Vue.mixin({
  ...['onShow', 'onUnload', 'onLoad', 'onReady', 'onPullDownRefresh', 'onHide'].reduce((previousValue, currentValue) => {
    previousValue[currentValue] = function () {

      this.$emit(`hooks:${currentValue}`, ...arguments);

    };
    return previousValue;
  }, {}),
});

然后再 main.js 中引入这个文件。

import './addLifeCycle';

使用

最后的使用方法如下：

<script lang="ts">
import { defineComponent, getCurrentInstance } from '@vue/composition-api';

import { useOnLoad, useOnShow } from '@/patch';


export default defineComponent({
  setup() {
    useOnLoad((e) => {
        console.log('onLoad 生命周期方法执行了！', e)
    })
    
    useOnShow((e) => {
        console.log('onShow 生命周期方法执行了！', e)
    })
  }
})

如何实现 vue setup 中使用小程序特有生命周期钩子？ ​

需求 ​

实现 ​

使用 ​

如何实现 vue setup 中使用小程序特有生命周期钩子？

需求

实现

使用