search

wuweijia / work-life-balance

记录工作与生活
https://github.com/wuweijia/wuweijia.github.io/issues
26 stars 2 forks source link

美团开源小程序框架（mpvue） VS 小程序官方框架（wepy） #32

Open wuweijia opened 6 years ago

wuweijia commented 6 years ago

美团开源小程序框架（mpvue）VS 小程序官方框架（wepy）

小程序实现原理

image

几个问题

为什么调研mpvue框架？

mpvue是什么?

mpvue 是一套定位于开发小程序的前端开发框架，其核心目标是提高开发效率，增强开发体验。使用该框架，开发者只需初步了解小程序开发规范、熟悉 Vue.js 基本语法即可上手。框架提供了完整的 Vue.js 开发体验，开发者编写 Vue.js 代码，mpvue 将其解析转换为小程序并确保其正确运行.

实现原理

image

框架的选择

在框架的选择上一直是一个争论比较多的问题，一方面是框架本身有好有坏，另一方面需求不同，在框架选择上的侧重点也不同。

当前的主要问题

  1. 状态的管理（数据的管理） 现在我们用的是全局变量进行数据管理，大家都知道写全局变量是一个不可控的行为。 稍一不注意就会引起问题，而且难以排查。更别说做我们后面可能有大量的数据管理。

解决方案

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类似）

其他问题

  1. 文档完善程度
  2. 社区活跃指数
  3. 我司未来技术走向

用哪一个？为什么要用？

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
wuweijia commented 6 years ago

image

Zack-Bee commented 6 years ago

感觉wepy不只是一个类vue的框架, 写的时候是能够感觉到有react的风格的, 它吸收了react和vue的很多优点, 使用redux作为数据管理可能有其他方面的考量

MinJieLiu commented 6 years ago

wepy 应该是吸收了 vue 和 react 的缺点吧。目前还不能完美组件化。坑太多，以后再也不用。

Zack-Bee commented 6 years ago

以后再也不用了+1

2018-05-31 10:40 GMT+08:00 MinJie notifications@github.com:

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 .

Aaronwn commented 6 years ago

刚准备用wepy呢，想着毕竟官方出品，在怎么样已不至于随便弃坑吧。

youxianbo commented 6 years ago

wepy 用作挺上手的啊

wuweijia commented 5 years ago

放弃 wepy 开始使用mpvue

youngjuning commented 5 years ago

放弃原生，开始使用mpvue重写

LeeeeeeM commented 5 years ago

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的多）

MinJieLiu commented 5 years ago

@LeeeeeeM wepy 是 react 风格？哪儿像 react？

wuweijia commented 5 years ago

@LeeeeeeM 明明是类似vue风格，与react风格相差甚远

wuweijia commented 5 years ago

现在如果做新的小程序，我建议直接上mpvue，虽然还是有异步的一些问题，但是解决起来已经好多了。自己封装一个promise 就可以了