微信小程序刚出来的时候，老板非常重视，问我做起来难不难。那时的API还少，文档也相当简单，我就如实回答；“这不挺简单的嘛”。老板就接着问：“这样，你看看把我们业务全部迁到小程序，两天够不够？”…(⊙_⊙;)… （后续：一年后，小程序开放了webview功能，两天说不定还真的够。所以说，凡事不要轻言放弃。）

对运营部门来说，增加一个渠道，改善用户体验，降低App获取成本，小程序是个好东西。然而对于开发人员来说，往往意味着数倍的工作量。移动端H5要维护一套，微信小程序要一套，支付宝小程序要一套，今年手机厂商还大力推广的“快应用”。虽然语法都与Vue类似，上手非常容易，但生态远没有React和Vue来得成熟，开发体验接近于阉割版的Vue。以微信小程序为例，列举开发过程最不爽的几点：

React全家桶 Vue全家桶 微信小程序

组件间通信 Redux Vuex 没有

侦听数据变化 componentWillReceiveProps生命周期 侦听器watch 没有

处理显示数据 JSX computed、fliters 只能计算后setData

Dom操作 ref ref 没有Dom概念

HTML

HTML5 HTML5

本来就不是html，

甚至不支持<table>

CSS CSS3 CSS3

样式和CSS有差异，

甚至background-image都不能用本地图片

为了克服上述困难，市面上出现了一些使用 Vue.js 开发小程序的前端框架，如WePY和mpvue。通过不同的webpack配置，可以对同一套代码分别编译成H5应用和小程序，减少了同时维护多端的成本。

mpvue指北

笔者之前头比较铁，在原生微信小程序上浪费了不少精力。在放弃了直接开发小程序，转投mpvue之后，开发手感有了极大的改善。mpvue的入门请参考官方文档，以下分享一些mpvue开发过程中的最佳实践。

Vue：

通过webpack.DefinePlugin配置环境变量，在H5和小程序中走不同分支，可以处理小程序和H5之间的各种差异；

不支持过滤器filters，什么都得用computed来解决；

所有在data/props/computed中的数据都会影响性能，甚至导致页面卡顿。虽然有些不爽，在methods中用到Vuex的数据，可以直接从this.$store.state中读取，而不是通过mapState写到computed里；

微信小程序API，H5需要自己实现。如wx.getStorage就得用localStorage实现一遍；

路由：

进入和离开页面，H5使用beforeRouteEnter和beforeRouteLeave，小程序使用onShow和onHide；

由于路由配置问题，mounted在H5中可能会触发两次，这是个经典问题。然而小程序中不会出现；

小程序可以通过配置实现底导航，但底导航对应的页面跳转必须使用switchTab。H5需要自己实现底导航的样式和逻辑，但可以直接通过路由跳转；

网络：

http请求，小程序需要自己模拟cookie；

如果使用socket.io，小程序上推荐socket.io.xcx；

HTML：

不支持v-html，不支持在 template 内使用 methods 中的函数；

HTML元素尽量只使用<div>，其他诸如<table>在小程序里并不兼容，会导致H5和小程序产生差异；

由于编译完的元素都是<view>和<div>，因此大部分的CSS元素选择器会失效，所有样式最好都使用class选择器；

微信小程序的input本身就有各种奇怪的bug，即使原生开发小程序，也尽量别使用各种高级功能；

同样由于小程序未知的bug，直接使用v-model可能会在某些手机上出现输入框莫明被清空的现象，而H5不会。这时可以用v-model.lazy；

小程序原生组件，H5需要自己实现一遍，比如用<select>实现<picker>；

转载请注明： 访得 » 微信小程序和Vue哪个更好