崮生
崮生
  • 发布:2020-11-27 15:27
  • 更新:2021-03-20 16:50
  • 阅读:780

#uniapp/composition-api# 中使用 onShow、onLoad 这样的生命周期

分类:uni-app
Vue

我的思路是使用 mixin 得知 onShow 被触发后去回调 setup 中 onShow 设置的函数

setup 中的代码会是这样的

 setup(props, ctx) {  
    onLoad((...arg: any) => {  
      console.log("onLoad", arg);  
    });  
  },

在 app.vue 中 mixin

 export default Vue.extend({  
    mpType: "app",  
    mixins: [vueLifeCycleMixin],  
  });

vueLifeCycleMixin 的具体实现

import { defineComponent, getCurrentInstance } from "@vue/composition-api";  
import Vue from "vue";  
export const vueLifeCycleMixin = Vue.mixin(  
  defineComponent({  
    onLoad: optionsWarp("onLoad"),  
    onShow: optionsWarp("onShow"),  
  }),  
);  
export const onShow = onFunWarp("onShow");  
export const onLoad = onFunWarp("onLoad");  

function optionsWarp(name: string) {  
  return function (this: any, ...args: any[]) {  
    const field = generateFieldName(name);  
    if (Array.isArray(this[field])) {  
      (this[field] as any).forEach((el: any) => el(...args));  
    }  
  };  
}  
function generateFieldName(name: string) {  
  return `__${name}`;  
}  
function onFunWarp(name: string) {  
  name = generateFieldName(name);  
  return (cb: Function) => {  
    var vm = getCurrentInstance() as any;  
    if (!vm) {  
      return console.warn("读取vm实例失败,请确保在 setup 中执行");  
    }  
    if (!vm[name]) {  
      vm[name] = [];  
    }  
    vm[name].push(cb);  
  };  
}

by 崮生 from 崮生 • 一些随笔
本文欢迎分享与聚合,全文转载未经授权( 联系我)不许可 。

0 关注 分享

要回复文章请先登录注册

毛学生

毛学生

https://github.com/TuiMao233/uni-composition-api 这是我创建的基于uni,composition-api的插件,有什么问题可以提交到 issues 中,这个项目会持续更新至 uni 全面支持 vue3,composition-api。
2021-03-20 16:50