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

分享/dcloud
我的思路是使用 mixin 得知 onShow 被触发后去回调 setup 中 onShow 设置的函数
setup 中的代码会是这样的
typescript
setup(props, ctx) { onLoad((...arg: any) => { console.log("onLoad", arg); }); },
在 app.vue 中 mixin
javascript
export default Vue.extend({ mpType: "app", mixins: [vueLifeCycleMixin], });
vueLifeCycleMixin 的具体实现
typescript
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后只显示... 这个做的说实话有点问题,而且设置中没有可以可视化配置的地方