用Vue.js开发微信小程序：mpvue

开源：美团点评技术团队
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 实现原理

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事件响应如果触发了数据更新，其生命周期函数更新将自动触发，在此函数上同步更新小程序数据，数据同步也就实现了。