MP-VUE3

• 组合api好处就是方便集中处理逻辑，而微信小程序还是options方式，有什么方式可以直接使用vue3响应数据吗？首选是使用uni-app 直接选择 vue3 模版，使用过的都知道有2大通病
  • 性能问题
  • 体积问题
• 如何解决这个问题，我们可以在ts中拦截处理，通过响应式数据拦截处理，而wxml 和 wxss 保持一致
  • 体积很小
  • 通过组合api 集中处理逻辑
  • 原生转换最方便

开始

• 请访问 在线文档 并跟随文档指引。

功能列表

• 支持 响应式 、App、Page、Component
• 支持 状态机、持久化存储
• 支持 生命周期
  • App onError、onHide、onLaunch、onPageNotFound、onShow、onThemeChange、onUnhandledRejection
  • Page onAddToFavorites、onHide、onLoad、onPageScroll、onPullDownRefresh、onReachBottom、onReady、onResize、onRouteDone、onSaveExitState、onShareAppMessage、onShareTimeline、onShow、onTabItemTap、onUnload
  • Component attached、detached、error、hide、moved、ready、resize、routeDone、show
• 支持 Router 路由
  • useRouter
  • useRoute
• 支持 Request 请求
  • 支持request

性能

第一项测试我们使用 新增可用券（100） 操作将可用券数量由 0 逐级递增到 1000：

	100	200	300	400	500	600	700	800	900	1000
Native	82.7	68.3	72	78.7	84.7	93.3	93.7	101.3	109.3	113.3
MpVue3	86	88	91	94	98	100	102	107	120	130

然后我们按顺序逐项点击 删除可用券（all） -> 新增可用券（1000） -> 更新可用券（1） -> 更新可用券（all） -> 删除可用券（1）：

	Delete (All)	Add (1000)	Update (1)	Update (All)	Delete (1)
Native	55.7	430	82.7	86	80
MpVue3	89	655	131	128	108

案例

• 完成一套完成电商小程序

许可证

MIT

Copyright (c) 2024-present Coze