uni-app 在 typescript 下生命周期钩子函数无法触发

uni-app 在 typescript 下生命周期钩子函数无法触发

环境信息 值
系统 macOS 10.14.2, Intel® Core™ i7-4870HQ CPU @ 2.50GHz
Node 10.12.0
Yarn 1.13.0
npm 6.5.0
Chrome 71.0.3578.98
Firefox 64.0
Safari 12.0.2
@dcloudio/types 0.0.2
@dcloudio/uni-app-plus-nvue 0.0.1
@dcloudio/uni-cli-shared 0.2.8
@dcloudio/uni-h5 0.2.2
@dcloudio/uni-mp-alipay 0.0.8
@dcloudio/uni-mp-baidu 0.0.7
@dcloudio/uni-mp-weixin 0.0.5
@dcloudio/vue-cli-plugin-hbuilderx 0.3.5
@dcloudio/vue-cli-plugin-uni 0.9.29
@dcloudio/webpack-uni-mp-loader 0.3.2
@dcloudio/webpack-uni-pages-loader 0.2.5
@vue/babel-helper-vue-jsx-merge-props 1.0.0-beta.2
@vue/babel-plugin-transform-vue-jsx 1.0.0-beta.2
@vue/babel-preset-app 3.4.0
@vue/babel-preset-jsx 1.0.0-beta.2
@vue/babel-sugar-functional-vue 1.0.0-beta.2
@vue/babel-sugar-inject-h 1.0.0-beta.2
@vue/babel-sugar-v-model 1.0.0-beta.2
@vue/babel-sugar-v-on 1.0.0-beta.2
@vue/cli-overlay 3.4.0
@vue/cli-plugin-babel 3.3.0
@vue/cli-plugin-typescript 3.4.0
@vue/cli-service 3.4.0
@vue/cli-shared-utils 3.4.0
@vue/component-compiler-utils 2.5.2
@vue/preload-webpack-plugin 1.1.0
@vue/web-component-wrapper 1.2.0
mpvue-page-factory 1.0.1
mpvue-template-compiler 1.0.13
vue 2.5.22
vue-class-component 6.3.2
vue-hot-reload-api 2.3.1
vue-loader 15.6.2
vue-property-decorator 7.3.0
vue-router 3.0.1
vue-style-loader 3.1.2
vue-template-compiler 2.5.22
vue-template-es2015-compiler 1.8.2
vuex 3.1.0
weex-vue-loader 0.7.0
@vue/cli 3.4.0

更多关于uni-app 在 typescript 下生命周期钩子函数无法触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

本来非 Vue 内置的钩子函数需要调用接口注册，例如：Component.registerHooks(‘onLoad’)
不过新版已经可以不用注册了，执行 npm update 更新即可。

更多关于uni-app 在 typescript 下生命周期钩子函数无法触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


目前临时方案:

create()替换onLoad()
页面传参, 通过this.$route.param 替换 onLoad(args)

是created()吧

上一个简单的demo，create和onLoad都没有走进去，框架不是支持typeScript吗？怎么回事？
<template> <view> 888 </view> </template>

<script> import { Component, Vue, Emit, Inject, Model, Prop, Provide, Watch } from 'vue-property-decorator' [@Component](/user/Component)({ components: {} }) export default class Home extends Vue { create () { console.log(777) } onLoad () { console.log(this, 444) } } </script> <style> </style>

我的created可以走，onLoad也不行

官方已解决: https://ask.dcloud.net.cn/question/66077

在uni-app中使用TypeScript时生命周期钩子不触发的问题，通常与装饰器语法或组件定义方式有关。以下是常见原因和解决方案：

  1. 确保正确使用vue-property-decorator的Component装饰器：
import { Vue, Component } from 'vue-property-decorator'

@Component
export default class MyComponent extends Vue {
  created() {
    console.log('created') 
  }
}

  1. 检查是否同时使用了options写法和装饰器写法，这会导致冲突。应该统一使用一种写法。

  2. 确认webpack配置中babel-loader正确处理了装饰器语法，需要在babel.config.js中添加：

plugins: [
  ['@babel/plugin-proposal-decorators', { legacy: true }]
]
  1. 检查TypeScript配置(tsconfig.json)是否启用了装饰器支持：
{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}
  1. 确保没有在子类中覆盖了父类的生命周期方法而未调用super：
mounted() {
  super.mounted() // 必须调用
  // 你的代码
}
回到顶部