uni-app框架下TypeScript语法中页面的onLoad事件为什么不会被触发？

Question

问题描述

在Uni-app平台下进行开发，单文件组件 (SFC) 的Script标签中使用TypeScript语法，当使用vue-property-decorator库的方式书写TypeScirpt代码时，为什么uni-app的单页生命周期函数onLoad,onReady等函数都无法被触发？而vue的mounted等函数可以被触发？

相关代码

//不使用vue-property-decorator的ts语句写法mounted，onLoad都会被触发

import Vue from 'vue';
export default Vue.extend({
    mounted() {
        console.log('The page is be mounted')
    },
    onLoad() {
        console.log('The page is on load success')
    }
});

//使用vue-property-decorator后只有vue的mounted会被触发，onLoad无法被触发

import { Vue, Component } from 'vue-property-decorator'

@Component
export default class App extends Vue{
    mounted() {
        console.log('The page is be mounted')
    }

    onLoad(){
        console.log('The page is on load success')
    }
}

Answer 1

vue-property-decorator包对于Component 装饰器是直接拿的vue-class-component包的

那么我们来看一下@Component装饰器源码

对于不处于$internalHooks中的且类型是函数的 它会给你丢到methods属性里去

你以为你最终是这样的

{
    mounted() {
        console.log('The page is be mounted')
    },
    onLoad() {
        console.log('The page is on load success')
    }
}

实际上是这样的

{
    mounted() {
        console.log('The page is be mounted')
    },
    methods: {
        onLoad() {
            console.log('The page is on load success')
        }
    }
}

所以不能被你的框架(uni-app)识别

建议自己再实现一个自定义装饰器(比如vue-class-component提供的createDecorator工厂方法) 通过分析componentOption来完成对最终返回的hook

Answer 2

用ts的话这样写

export default class App extends Vue {
    onLoad() {
    }

}