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

#分享/dcloud#

我的思路是使用 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);
  };
}

#uniapp/坑# 未确定是否是企业微信小程序的问题,自定义组件内部 emit tap 事件,外部再 <c-btn @tap="test()"​></c-btn> test 会被执行两次。在微信开发工具中没有此问题


#vscode# 在超出最大列宽( 10000 )后不再显示的解决办法 在 vscode 的设置中添加

"editor.stopRenderingLineAfter" : -1

他默认超出10000后只显示... 这个做的说实话有点问题,而且设置中没有可以可视化配置的地方

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