blog
blog copied to clipboard
wuweijia
美团开源小程序框架（mpvue） VS 小程序官方框架（wepy）
美团开源小程序框架（mpvue）VS 小程序官方框架（wepy）
小程序实现原理
几个问题
- 为什么要调研美团的mpvue小程序框架？
- 框架之间怎么做选择？
- 为什么我会选择要使用xxx框架？
当初为什么用wepy？
- 我们选择wepy的时候没有横向对比的产品，我们只能使用wepy，而且是由官方提供（大厂开发靠谱）
为什么调研mpvue框架？
- 这款框架在前两周刚刚开源，好评不断。
- 在使用过程中遇到了问题。希望通过框架对比在框架上避免问题，解决问题。
mpvue是什么?
mpvue 是一套定位于开发小程序的前端开发框架，其核心目标是提高开发效率，增强开发体验。使用该框架，开发者只需初步了解小程序开发规范、熟悉 Vue.js 基本语法即可上手。框架提供了完整的 Vue.js 开发体验，开发者编写 Vue.js 代码，mpvue 将其解析转换为小程序并确保其正确运行.
实现原理
框架的选择
在框架的选择上一直是一个争论比较多的问题，一方面是框架本身有好有坏，另一方面需求不同，在框架选择上的侧重点也不同。
当前的主要问题
- 状态的管理（数据的管理） 现在我们用的是全局变量进行数据管理，大家都知道写全局变量是一个不可控的行为。 稍一不注意就会引起问题，而且难以排查。更别说做我们后面可能有大量的数据管理。
解决方案
redux （wepy官方推荐）
也是现在app团队在用的数据管理模式。 单向数据流特点，严格的操作规范 通过disptch 一个action 触发更新数据
redux是flux的实现，redux的理论中state是不可更改的，你需要通过某种手段返回一个新的数据 redux 核心思想
View： 视图层 Action（动作）：视图层发出的消息（比如mouseClick） Dispatcher（派发器）：用来接收Actions、执行回调函数 Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化, 其核心思想借鉴了Flux、Redux 或者你也可以简单理解为Vuex,它是一个全局的,单例模式的管理状态.Vue应用中任何组件都可以获取Vuex中的状态(数据)以及去触发Vuex的行为. vuex 文档
其他
mobx（跟vuex类似）
其他问题
- 文档完善程度
- 社区活跃指数
- 我司未来技术走向
用哪一个？为什么要用？
wepy 是类vue写法，官方推荐用redux作为状态管理，我没有想清楚原因。 mpvue既然是vue为主，当然是要使用vuex。官方搭配，解决问题方便，思想统一。 vue的可能是以后web端的模板框架。
| 对比\框架 | mpvue | wepy |
|---|---|---|
| 语法 | vue.js | 类vue.js |
| 标签 | htm l + 小程序 | 小程序 |
| 样式 | ---- | - |
| 组件化 | vue规范 | 自定义组件规范 |
| 复用 | h5 | h5 |
| 自动构建 | webpack | 框架内置 |
| 成本 | vue 学习 | vue 和 wepy |
| 数据管理 | vuex | redux |
感觉wepy不只是一个类vue的框架, 写的时候是能够感觉到有react的风格的, 它吸收了react和vue的很多优点, 使用redux作为数据管理可能有其他方面的考量
以后再也不用了+1
2018-05-31 10:40 GMT+08:00 MinJie [email protected]:
wepy 应该是吸收了 vue 和 react 的缺点吧。目前还不能完美组件化。坑太多，以后再也不用。
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/wuweijia/wuweijia.github.io/issues/32#issuecomment-393383356, or mute the thread https://github.com/notifications/unsubscribe-auth/AZJCEMNfECWE-5uBERaZFcaPcQtmPdbvks5t31gBgaJpZM4StN4M .
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA http://mpvue.com/mpvue/#_5
mpvue 通过vue数据劫持 将数据变化传给setData ，本质上wepy是react风格，mpvue是为了兼容vue，提高开发效率（或者说中国的开发者使用vue的多）
