mpvue中如何正确使用React写法处理小程序生命周期？

Zz雅雯提问于 2026-03-03 23:07:20 阅读 43

移动

我最近在用mpvue开发小程序，但团队习惯用React的写法，所以尝试在mpvue里写类似React的组件。可是在页面加载时onLoad没被触发，数据也没更新，是不是mpvue不支持这种写法？

我试过把逻辑写在created里也不行，控制台也没报错，就是页面空白。下面是我写的代码：

export default {
  data() {
    return { count: 0 };
  },
  onLoad() {
    this.count = 10;
  },
  render() {
    return <View>Count: {this.count}</View>;
  }
}

我来解答赞 5 收藏

反馈

2 条解答

海燕的笔记 Lv1

mpvue不完全支持React写法，你得用Vue的方式定义生命周期。把onLoad换成mounted试试，记得引入原生组件要用import { View } from '@dcloudio/uni-app'。代码改成这样：

export default {

  data() {

    return { count: 0 };

  },

  mounted() {

    this.count = 10;

  },

  render(h) {

    return h('view', Count: ${this.count});

  }

}

我之前也踩过这坑，mpvue就是这么个德性，别指望它完全像React。

2026-03-29 17:01

公孙朱莉 Lv1

你这明显是把 mpvue（Vue）和 React 搞混了，mpvue 根本不支持 React 的 render 函数和 JSX 语法。要么老老实实按 Vue 的 template 写法改，要么直接换用 Taro 这种原生支持 React 的框架，别硬凑。

如果非要用 mpvue，正确的 Vue 写法是下面这样，把 render 换成 template。

<template>

  <div>Count: {{count}}</div>

</template>



<script>

export default {

  data() {

    return { count: 0 };

  },

  onLoad() {

    this.count = 10;

  }

}

</script>

2026-03-04 14:11