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 等生命周期加进去。

[hi-jian]

app.ts

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

[hi-jian]

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

[QzhouZ]

@ShmmGood 谢啦 我试试看

[hi-jian]

@ShmmGood 谢啦 我试试看

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

[QzhouZ]

@ShmmGood @hjwzzz
嗨，其他都可以触发，onShareAppMessage 试了还是不行，请教下，有什么方案吗

[hi-jian]

@ShmmGood @hjwzzz
嗨，其他都可以触发，onShareAppMessage 试了还是不行，请教下，有什么方案吗

我目前没有使用Vue 进行测试，如果你尝试过如下操作的话

Component.registerHooks([..., 'onShareAppMessage']);

onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }

如果👆的办法不可以的话，我暂时也没有什么好想法

[QzhouZ]

@ShmmGood @hjwzzz
嗨，其他都可以触发，onShareAppMessage 试了还是不行，请教下，有什么方案吗

我目前没有使用Vue 进行测试，如果你尝试过如下操作的话

Component.registerHooks([..., 'onShareAppMessage']);

onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }

如果👆的办法不可以的话，我暂时也没有什么好想法

谢啦 我这边就这是这么应用的 还是不行 我再研究下看看

[hi-jian]

@ShmmGood @hjwzzz
嗨，其他都可以触发，onShareAppMessage 试了还是不行，请教下，有什么方案吗

我目前没有使用Vue 进行测试，如果你尝试过如下操作的话

Component.registerHooks([..., 'onShareAppMessage']);

onShareAppMessage (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }

如果👆的办法不可以的话，我暂时也没有什么好想法

谢啦 我这边就这是这么应用的 还是不行 我再研究下看看

不客气！如果你解决了建议分享下

[yuangu]

你们能用vue来写app？

[hi-jian]

你们能用vue来写app？

这是个小程序