WePy 与 mpvue 对比

问题

WePy 和 mpvue 都是小程序开发框架，它们有什么区别？如何选择？

解答

基本信息

特性	WePy	mpvue
开发团队	腾讯	美团
语法风格	类 Vue 单文件组件	完整 Vue.js
构建工具	自有编译器	webpack
状态管理	Redux / 自带	Vuex

WePy 示例

<!-- index.wpy -->
<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @tap="handleClick">点击</button>
  </view>
</template>

<script>
import wepy from 'wepy'

export default class Index extends wepy.page {
  data = {
    message: 'Hello WePy'
  }

  methods = {
    handleClick() {
      this.message = 'Clicked!'
      // WePy 1.x 需要手动调用 $apply()
      this.$apply()
    }
  }

  onLoad() {
    console.log('页面加载')
  }
}
</script>

<style lang="scss">
.container {
  padding: 20px;
}
</style>

mpvue 示例

<!-- index.vue -->
<template>
  <div class="container">
    <p>{{ message }}</p>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello mpvue'
    }
  },
  methods: {
    handleClick() {
      // 标准 Vue 写法，自动响应
      this.message = 'Clicked!'
    }
  },
  onLoad() {
    console.log('页面加载')
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

主要差异

1. 数据响应

// WePy 1.x - 需要手动触发更新
this.list.push(item)
this.$apply()

// mpvue - Vue 响应式，自动更新
this.list.push(item)

2. 组件通信

// WePy - 使用 $broadcast / $emit
// 父组件
this.$broadcast('event-name', data)

// mpvue - 标准 Vue 方式
// 父组件
<child :data="data" @change="handleChange" />

3. 生命周期

// WePy - 小程序原生 + 组件生命周期
onLoad() {}      // 页面
onShow() {}      // 页面
onReady() {}     // 组件

// mpvue - Vue 生命周期 + 小程序生命周期
created() {}     // Vue
mounted() {}     // Vue
onLoad() {}      // 小程序
onShow() {}      // 小程序

优缺点对比

WePy

• ✅ 腾讯官方维护，与小程序契合度高
• ✅ 编译后代码体积小
• ✅ 支持原生组件混用
• ❌ 学习成本（非标准 Vue）
• ❌ 1.x 版本需手动 $apply()

mpvue

• ✅ 完整 Vue 开发体验
• ✅ 可复用 Vue 生态（Vuex、vue-router 部分）
• ✅ Web 项目迁移成本低
• ❌ 已停止维护（2019 年后）
• ❌ 部分 Vue 特性不支持（如 filter、slot）

现状与替代方案

2023+ 推荐方案：

1. uni-app - 跨端能力强，社区活跃
2. Taro - 京东出品，React/Vue 双支持
3. 原生小程序 - 简单项目首选

关键点

• WePy 类 Vue 语法但非标准 Vue，mpvue 是完整 Vue 运行时
• mpvue 已停止维护，新项目不建议使用
• WePy 1.x 需要手动 $apply()，2.x 已改进
• 现在更推荐 uni-app 或 Taro 作为跨端方案
• 简单项目直接用原生小程序开发即可