Taro: Taro3 Vue2 用 vue-property-decorator 无法触发onload、onShow等生命周期

[QzhouZ]

相关平台

微信小程序

小程序基础库: 2.12.2
使用框架: Vue 2

复现步骤

<template>
  <view></view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'test'
})
export default class Webview extends Vue {

  // 正常执行
  mounted () {
    console.log(0)
  }

  // 不执行
  onShow () {
    console.log(1)
  }

  // 不执行
  onLoad (option) {
    console.log(option)
  }
}
</script>

期望结果

// 不执行
  onShow () {
    console.log(1)
  }

  // 不执行
  onLoad (option) {
    console.log(option)
  }

onShow和onLoad生命周期都没有触发

实际结果

onShow和onLoad生命周期可以触发

环境信息

Taro CLI 3.0.10 environment info:
    System:
      OS: macOS 10.14.6
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.14.2 - ~/.nvm/versions/node/v10.14.2/bin/node
      Yarn: 1.5.1 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v10.14.2/bin/npm
    npmPackages:
      @tarojs/components: 3.0.8 => 3.0.8 
      @tarojs/mini-runner: 3.0.8 => 3.0.8 
      @tarojs/runtime: 3.0.8 => 3.0.8 
      @tarojs/taro: 3.0.8 => 3.0.8 
      @tarojs/webpack-runner: 3.0.8 => 3.0.8 
      babel-preset-taro: 3.0.8 => 3.0.8 

[QzhouZ]

没人关注Vue相关的实践吗，同样的方式在 mpvue、uni-app 都是可行的

[hjwzzz]

没人关注Vue相关的实践吗，同样的方式在 mpvue、uni-app 都是可行的

俺也一样

[hjwzzz]

没人关注Vue相关的实践吗，同样的方式在 mpvue、uni-app 都是可行的

可以通过修改 vue-class-component 库中的 src/component.ts 中的 $internalHooks 变量，将 on Show 等生命周期加进去。

[ShmmGood]

app.ts

import {Component} from 'vue-property-decorator'
Component.registerHooks(['onShow', 'onHide', 'onError', 'onPageNotFound', 'onReady', 'onLoad', 'beforeUpdate', 'updated']);

[ShmmGood]

还可以使用 vuex-module-decorators 这样开发起来更顺畅

[QzhouZ]

@ShmmGood 谢啦 我试试看

[ShmmGood]

@ShmmGood 谢啦 我试试看

亲测可用，然后 其他的生命周期在 Component.registerHooks 添加即可使用，不过我目前用的是react， 有想转回原生小程序开发了，不知道是不是写的问题react在小程序表现比较卡顿