开源:美团点评技术团队
mpvue官网

小程序开发特点

1、简洁的开发方式;
2、通过多页面聚合完成轻量的产品功能;
4、小程序以离线包方式下载到本地,通过微信客户端载入和启动;
5、开发规范简洁,技术封装彻底,自成开发体系;
6、小程序本身定位为一个简单的逻辑视图层框架;

mpvue 是什么

1、一套定位于开发小程序的前端开发框架,核心目标是提高开发效率,增强开发体验;
2、框架提供了完整的Vue.js 开发体验,开发者编写Vue.js代码,mpvue将其解析转换为小程序并确保其正确运行;
3、框架还通过 vue-cli 工具向开发者提供 quick start 示例代码,开发者只需要执行一条简单命令,即可获得运行的项目;

小程序开发阶段面临的主要问题

1、组件化机制不够完善
2、代码多端复用能力欠缺
3、小程序框架和团队技术栈无法有机结合
4、小程序学习成本不够低

使用Vue.js 开发小程序,带来如下开发效率提升

1、H5代码可以通过最小修改复用到小程序;
2、使用Vue.js 组件机制开发小程序,可实现小程序和H5组件复用;
3、技术栈统一后小程序学习成本降低,开发者从H5 转换到小程序不需要更多学习;
4、Vue.js 代码可以让所有前端直接参与开发维护

Vue.js 与 小程序 的联系

1、一致的工作原理:都是典型的逻辑视图层框架,逻辑层和视图层之间的工作方式为:数据变更驱动视图更新;视图交互触发事件,事件响应函数修改数据再次触发视图更新。

mpVue 实现原理

 

 

 

思路 : 鉴于Vue.js 和 小程序一致的工作原理,我们思考将小程序的功能托管给Vue.js,在正确的时机将数据变更同步到小程序,从而达到开发小程序的目的。这样,我们可以将精力聚焦在Vue.js上,参照Vue.js编写与之对应的小程序代码,小程序负责视图层展示,所有业务逻辑收敛到Vue.js中,Vue.js数据变更后同步到小程序。

Vue 代码
  • 将小程序页面编写为Vue.js实现
  • 以Vue.js 开发规范实现父子组件关联
小程序代码
  • 以小程序开发规范编写视图层模板
  • 配置生命周期函数,关联数据更新调用
  • 将Vue.js 数据映射为小程序数据模型
并在此基础上,附加如下机制
  • Vue.js 实例与小程序Page实例建立关联
  • 小程序和Vue.js 生命周期建立映射关系,能在小程序生命周期中触发 Vue.js 生命周期
  • 小程序事件建立代理机制,在事件代理函数中触发与之对应的Vue.js 组件事件响应

QA

1、要同时维护 Vue.js 和小程序,是否需要写两个版本的代码实现?
2、小程序负责视图层展现,Vue.js的视图层是否还需要,如果不需要应该如何处理?
3、生命周期如何打通,数据同步更新如何实现?

首先,mpvue 为提高效率而生,本身提供了 自动生成 小程序代码的能力,小程序代码根据 Vue 代码构建得到,并 不需要 同时开发两套代码。

Vue.js 视图层渲染由 render 方法完成,同时在内存中维护着一份虚拟DOM,但是mpvue不需要使用Vue.js 完成视图层渲染,因此我们改造了render方法,禁止视图层渲染。Vue runtime 有多个平台实现,所以我们增加了新的平台 mpvue。

生命周期关联
1、生命周期和数据同步是mpvue框架的灵魂,Vue.js和小程序的数据彼此隔离,各自有不同的更新机制。
2、mpvue 从生命周期和事件回调函数切入,在Vue.js 触发数据更新时实现数据同步。
3、小程序通过视图层呈现给用户、通过事件响应用户交互,Vue.js在后台维护着数据变更和逻辑。
4、数据更新发端于小程序,处理自Vue.js,Vue.js数据变更后再同步到小程序。
5、为了实现数据同步,mpvue修改了Vue.js runtime 实现,在Vue.js 的生命周期中增加了更新小程序数据的逻辑。

事件代理机制
1、用户交互触发的数据更新通过事件代理机制完成
2、一方面,Vue.js执行环境中维护着一份实时的虚拟DOM,这与小程序的视图层完全对应,因此,在小程序组件节点上触发事件后,只要找到虚拟DOM上对应的节点,就可以触发对应的事件。
2、另一方面,Vue.js事件响应如果触发了数据更新,其生命周期函数更新将自动触发,在此函数上同步更新小程序数据,数据同步也就实现了。

 转自:https://www.jianshu.com/p/0c2625981095