点选下方“CSDN”，优先选择“首页社会公众号”
危急关头，第三天数送抵！
在孔布龙博客润饰着“将会导入许多相关 TypeScript 的改良”两周后，SS为 Level E 的 Vue.js 2.5 带着日漫风走进了他们此刻。从 Release Notes 能看见，Vue.js 2.5 有著更快的 TypeScript 软件系统，更快的consequences，更快地全力支持单文档模块中的表达式式模块和与自然环境毫无关系的伺服器端图形。具体如下表所示：
更快的 TypeScript 软件系统
得力于 TypeScript 项目组的协助，2.5 提供更多了大幅改良的类别新闻稿：
采用预设的 Vue API 时，对 this 能采用适度的类别推测。 它也能在单文档模块中组织工作！
如前所述模块的 props 快捷键，对 this 中的 props 输出推测。
最重要的是，那些改良也使纯 JavaScript 使用者获益匪浅！假如你采用 VSCode 与DT棒的的 Vetur 扩充，你将赢得大幅改良的手动顺利完成提议，即使在Vue模块中采用纯 JavaScript 时也能赢得输出提示重要信息！ 这原因在于vue-language-server是负责管理预测 Vue 模块的外部包，能借助 TypeScript C++来抽取相关你的标识符的更多重要信息。 除此之外，任何人全力支持词汇伺服器协定的GUI都能借助 vue-language-server来提供更多类似于的机能。
注意：TypeScript 使用者还应将以下包更新为最新版本从而兼容类别新闻稿：vue-router，vuex，vuex-router-sync 和vue-class-component。
更快地consequences
在2.4及更早版本中，他们通常采用全局 config.errorHandleroption 来处理应用流程中的意外错误。 他们还有 renderError 模块快捷键来处理图形表达式中的错误。 但是，他们缺少处理应用流程特定部分内的泛型错误的机制。
在2.5中，他们导入了新的 errorCaptured 钩子。 具有此钩子的模块捕获其子模块树（不包括其自身）中的所有错误（不包括在异步回调中调用的那些）。 假如你熟悉 React，这与 React 16 中导入的错误边界（https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html#introducing-error-boundaries）的概念相似。钩子接收与全局 errorHandler 相同的参数，你能借助那个钩子来优雅地处理和显示错误（https://gist.github.com/yyx990803/9bdff05e5468a60ced06c29c39114c6b#error-handling-with-errorcaptured-hook）。
更快地全力支持 SFC 中的表达式式模块
采用 vue-loader> = 13.3.0 和 Vue 2.5，在 * .vue 文档中定义为单个文档模块的表达式式模块现在能得到正确的模板编译，Scoped CSS和热重新加载全力支持。 这使将叶子模块转换为表达式式的更为容易，从而进行性能优化。
与自然环境毫无关系的伺服器端图形
vue-server-renderer 的预设构建假定一个 Node.js 自然环境，这使它在有的 JavaScript 运行时（如 php-v8js 或Nashorn）中不可用。 在 2.5 中，他们早已正式发布了一个与自然环境毫无关系的 vue-server-renderer 版本，能在浏览器或纯 JavaScript 引擎中采用。 这能打开有趣的策略，例如直接在 PHP 进程中采用 Vue 伺服器端图形。
同样，提议你查看完整的正式发布说明从而了解其他 API 的改良，包括 v-on，v-model，scoped slot，provide/inject 等。
Vue 2.5.0 源码下载：https://codeload.github.com/vuejs/vue/zip/v2.5.0
Vue.js 这款渐进式的 JavaScript 架构自 2013 年正式发布至今，其简洁的语法设计、轻量快速的特点深受技术社区喜爱，在国内外都赢得了非常广泛的应用及拓展，比如饿了么的开源模块库 Element UI 即是 Vue 合作开发，而阿里巴巴的 Weex 与 Vue 也多有合作。
今天，他们来介绍一款由美团点评研发，采用 Vue.js 来合作开发微信小流程的前端架构 —— mpVue。采用此架构，合作开发者将得到完整的 Vue.js 合作开发体验，同时为 H5 和小流程提供了标识符复用的能力。假如想将 H5 项目改造为小流程，或合作开发小流程后希望将其转换为 H5，mpVue将是十分契合的方案。
为了提高合作开发效率，增强合作开发体验，他们造了个用 Vue 合作开发小流程的轮子
小流程合作开发特点
微信小流程推荐简洁的合作开发方式，通过多页面聚合顺利完成轻量的产品机能。小流程以离线包方式下载到本地，通过微信客户端载入和启动，合作开发规范简洁，技术封装彻底，自成合作开发体系，有 Native 和 H5 的影子，但又绝不雷同。
小流程本身定位为一个简单的逻辑视图层架构，官方并不推荐用来合作开发复杂应用，但业务需求却难以做到精简。复杂的应用对合作开发方式有较高的要求，如模块和模块化、手动构建和软件系统、标识符复用和合作开发效率等，但小流程合作开发规范较大地限制了这部分能力。为了解决上述问题，提供更多更快的合作开发体验，他们创造了 mpVue，通过采用 Vue.js 合作开发微信小流程。
mpVue 是什么
mpVue 是一套定位于合作开发小流程的前端合作开发架构，其核心目标是提高合作开发效率，增强合作开发体验。采用该架构，合作开发者无须了解小流程合作开发规范，只需要熟悉 Vue.js 基本语法即可上手。架构提供更多了完全的 Vue.js 合作开发体验，合作开发者编写 Vue.js 标识符，mpVue 将其解析转换为小流程并确保其正确运行。除此之外，架构还通过 CLI 工具向合作开发者提供更多 Quick Start 示例标识符，合作开发者只需执行一条简单命令，即可赢得可运行的项目。
为什么做 mpVue
在小流程内测之初，他们计划快速迭代出一款对标 H5 的产品实现，其核心诉求在于快速实现、标识符复用、低成本和高效率等。随后他们经历了多个小流程建设，结合业务场景、技术选型和小流程合作开发方式，整理汇总出了合作开发阶段面临的主要问题：
模块化机制不够完善；
标识符多端复用能力欠缺；
小流程架构和项目组技术栈无法有机结合；
小流程学习成本不够低。
具体内容体现为：
模块机制：小流程逻辑和视图层标识符彼此分离，公共模块抽取后无法聚合为单文档入口，模块需分别在视图层和逻辑层导入，维护性差；模块无命名空间机制，事件回调必须设置为全局表达式，模块设计有命名冲突的风险，数据封装不强。合作开发者需要友好的标识符组织方式，通过 ES 模块一次性导入；模块数据有良好的封装。成熟的模块机制，对工程化合作开发至关重要。
多端复用：常见的业务场景有两类，通过已有 H5 产品改造为小流程应用或反之。从效率角度出发，合作开发者希望通过复用标识符顺利完成合作开发，但小程序合作开发架构却无法做到。他们曾尝试通过静态标识符预测将 H5 标识符转换为小流程，但只做了视图层转换，无法带来更多收益。多端标识符复用需要更成熟的解决方案。
另一方面，小流程合作开发方式与 H5 近似，因此他们考虑和 H5 做标识符复用。同时，沿袭项目组技术栈选型，他们将 Vue.js 确定为小流程合作开发规范。采用 Vue.js 合作开发小流程，将直接带来如下表所示合作开发效率的提升：
H5 标识符能通过最小修改复用到小流程；
采用 Vue.js 模块机制合作开发小流程，可实现小流程和 H5 模块复用；
技术栈统一后小流程学习成本降低，合作开发者从 H5 转换到小流程不需要更多学习；
标识符维护成本降低，Vue.js 标识符能让所有前端直接参与合作开发维护。
为什么是 Vue.js？这取决于项目组技术栈选型，导入新的选型对统一技术栈和提高合作开发效率相悖，有违合作开发工具服务业务的初衷。
mpVue 的演进
确定，经历了三个阶段。
第三阶段：他们实现了一个视图层标识符转换工具，旨在提高标识符首次合作开发效率。通过将 H5 视图层标识符转换为小流程标识符，包括 HTML 标签映射、Vue.js 模板和样式转换，在此目标代码上进行二次合作开发。他们做到了有限的标识符复用，但模块化合作开发和小流程学习成本并未得到有效改善。
第二阶段：他们着眼于完善标识符模块化机制。参照 Vue.js 模块规范设计了标识符组织形式，通过标识符转换工具将标识符解析为小流程。转换工具主要解决模块间数据同步、生命周期关联和命名空间问题。最终他们实现了一个 Vue.js 语法子集，但想要实现更多特性或跟随 Vue.js 版本迭代，组织工作量变得难以估计，有永无止境之感。
第三阶段：他们的目标是实现对 Vue.js 语法全集的全力支持，达到采用 Vue.js 合作开发小流程的目的。并通过导入 Vue.js RunTime 实现了对 Vue.js 语法的全力支持，从而避免了人肉语法适配。至此，他们顺利完成了采用 Vue.js 合作开发小流程的目的。较好地实现了技术栈统一、模块化合作开发、多端标识符复用、降低学习成本和提高合作开发效率的目标。
mpVue 设计思路
Vue.js 和小流程都是典型的逻辑视图层架构，逻辑层和视图层之间的组织工作方式为：数据变更驱动视图更新；视图交互触发事件，事件响应表达式修改数据再次触发视图更新，如图 1 所示。
图 1 小流程实现原理
鉴于 Vue.js 和小流程一致的组织工作原理，他们思考将小流程的机能托管给 Vue.js，在正确的时机将数据变更同步到小流程，从而达到合作开发小流程的目的。这样，他们能将精力聚焦在 Vue.js 上，参照 Vue.js 编写与之对应的小流程代码，小流程负责管理视图层展示，所有业务和逻辑收敛到 Vue.js 中，Vue.js 数据变更后同步到小流程，如图 2 所示。如此一来，他们就赢得了以 Vue.js 的方式合作开发小流程的能力。为此，他们设计的方案如下表所示：
图 2 mpVue 实现原理
Vue 标识符：
将小流程页面编写为 Vue.js 实现；
以 Vue.js 合作开发规范实现父子模块关联。
小流程标识符：
以小流程合作开发规范编写视图层模板；
配置生命周期表达式，关联数据更新调用；
将 Vue.js 数据映射为小流程数据模型。
并在此基础上，附加如下表所示机制：
Vue 实例与小流程 Page 实例建立关联；
小流程和 Vue 生命周期建立映射关系，能在小流程生命周期中触发 Vue 生命周期；
小流程事件建立代理机制，在事件代理表达式中触发与之对应的 Vue 模块事件响应。
这套机制总结起来非常简单，但实现却相当复杂。在揭秘具体内容实现之前，读者可能会有这样许多疑问：
要同时维护 Vue.js 和小流程，是否需要写两个版本的标识符实现？
小流程负责管理视图层展现，Vue.js 的视图层是否还需要，假如不需要应该如何处理？
生命周期如何打通，数据同步更新如何实现？
上述问题包含了 mpVue 架构的核心内容，下文将仔细为你道来。首先，mpVue 为提高效率而生，本身提供更多了手动生成小流程标识符的能力，小流程标识符根据 Vue.js 标识符构建得到，并不需要同时合作开发两套标识符。
Vue.js 视图层图形由 Render 方法顺利完成，同时在内存中维护着一份虚拟 DOM，mpVue 无需采用 Vue.js 顺利完成视图层图形，因此他们改造了 Render 方法，禁止视图层图形。熟悉源标识符的读者都知道 Vue RunTime 有多个平台的实现，除了他们常见的 Web 平台，还有 Weex。从现在开始，他们增加了新的平台 mpVue。
再看第三个问题，生命周期和数据同步是 mpVue 架构的灵魂，Vue.js 和小流程的数据彼此隔离，各自有不同的更新机制。mpVue 从生命周期和事件回调表达式切入，在 Vue.js 触发数据更新时实现数据同步。小流程通过视图层呈现给使用者、通过事件响应使用者交互，Vue.js 在后台维护着数据变更和逻辑。能看见，数据更新发端于小流程，处理自 Vue.js，Vue.js 数据变更后再同步到小流程。为实现数据同步，mpVue 修改了 Vue.js RunTime 实现，在 Vue.js 的生命周期中增加了更新小流程数据的逻辑。
而使用者交互触发的数据更新则是通过事件代理机制顺利完成。在 Vue.js 标识符中，事件响应表达式对应到模块的 method 方法，Vue.js 手动维护了上下文自然环境。然而在小流程中并没有类似于的机制，又因为 Vue.js 执行自然环境中维护着一份实时的虚拟 DOM，这与小流程的视图层完全对应。他们思考，在小流程模块节点上触发事件后，只要找到虚拟 DOM 上对应的节点，触发对应的事件不就顺利完成了么。Vue.js 事件响应假如触发了数据更新，其生命周期表达式更新将手动触发，在此表达式上同步更新小流程数据，数据同步就实现了。
mpVue 如何采用
mpVue 架构本身由多个 npm 模块构成，入口模块早已处理好依赖关系，合作开发者只需要执行如下表所示标识符即可顺利完成本地项目创建。
# 安装 vue-cli
$ npm install –global vue-cli
# 根据模板项目创建本地项目，目前为内网地址，暂稳开放
$ vue init ‘bitbucket:xxx.meituan.com:hfe/mpvue-quickstart’ –clone my-project
# 安装依赖和启动手动构建
$ cd my-project
$ npm install
$ npm run dev
执行完上述命令，在当前项目的 dist 子目录将构建出小流程目标标识符，采用小流程合作开发者工具载入 dist 目录即可启动本地调试和预览。
示例项目遵循 Vue.js 模板项目规范，通过 Vue.js 命令行工具 vue-cli 创建。标识符组织形式与 Vue.js 官方实例保持一致，他们为小流程定制了 Vue.js RunTime 和 Webpack 加载器，此部分依赖也早已内置到项目中。
针对小流程合作开发中常见的两类标识符复用场景，mpVue 架构为合作开发者提供更多了解决思路和技术全力支持，合作开发者只需要在此指导下进行项目配置和改造。
将小流程转换为 H5
直接采用 Vue.js 规范合作开发小流程，标识符本身与 H5 并无不同，具体内容标识符差异会集中在平台 API 部分。除此之外无需明显改动，改造主要分以下几个部分：
将小流程平台的 Vue.js 架构替换为标准 Vue.js；
将小流程平台的 Vue-loader 加载器替换为标准 Vue-loader；
适配和改造小流程与 H5 的底层 API 差异。
将 H5 转换为小流程
早已采用 Vue.js 合作开发完 H5，则需要顺利完成以下事宜：
将标准 Vue.js 替换为小流程平台的 Vue.js 架构；
将标准 Vue-loader 加载器替换为小流程平台的 Vue-loader；
适配和改造小流程与 H5 的底层 API 差异。
根据小流程合作开发平台提供更多的能力，他们最大程度地全力支持了 Vue.js 语法特性，但部分机能现阶段暂时尚未实现，具体内容见表 1。
表 1 mpVue 暂不全力支持的语法特性
mpVue 架构的目标是将小流程和 H5 的合作开发方式通过 Vue.js 建立关联，达到最大程度的标识符复用。但由于平台差异的客观存在（主要集中在实现机制、底层 API 能力差异），他们无法做到标识符 100%复用，平台差异部分的改造成本无法避免。对标识符复用的场景，合作开发者需要重点思考如下表所示问题并做好准备：
尽量采用平台无的语法特性，这部分特性无需转换和适配成本；
避免采用不全力支持的语法特性，譬如 slot、filter 等，降低改造成本；
假如采用特定平台 API，考虑抽象好适配层接口，通过切换底层实现顺利完成平台转换。
mpVue 最佳实践
在表 2 中，他们对微信小流程、mpVue、WePY 这三个合作开发架构的主要能力和特点做了横向对比，协助大家了解不同架构的侧重点，结合业务场景和合作开发习惯，确定技术方案。对如何更快地采用 mpVue 进行小流程合作开发，他们总结了许多最佳实践。
表 2 架构主要能力及特性对比
采用 vue-cli 命令行工具创建项目，采用 Vue 2.x 的语法规范进行合作开发；
避免采用不架构不全力支持的语法特性，即有部分 Vue.js 语法在小流程中无法采用，尽量 mpVue 和 Vue.js 共有特性；
合理设计数据模型，对数据的更新和操作做到细粒度控制，避免性能问题；
合理采用模块化合作开发小流程，提高标识符复用。
结语
mpVue 架构早已在业务项目中得到实践和验证，目前合作开发文档也早已就绪，正在做开源前的最后准备，希望能够为小流程和 Vue.js 生态贡献一份力量。mpVue 的初衷是希望让 Vue.js 的合作开发者以低成本接入小流程合作开发，其能力和采用体验还有待进一步的检验。他们未来会继续扩充现有机能、解决使用者的问题和需求、优化合作开发体验、完善周边生态建设，以协助到更多的合作开发者。
需要说明一下，mpVue 是通过 fork Vue.js 源码进行二次合作开发，新增加了 mp 平台的 Vue.js 实现，他们保留了跟随 Vue.js 版本升级的能力，希望未来能够实现更快的能力增强，最后感谢 Vue.js 架构和微信小流程对业界带来的便利。
作者：
苏宓，CSDN 小姐姐；
胡成全，美团点评酒旅事业群前端技术专家，目前主要从事移动端和小流程技术方向，致力于小流程的工程化合作开发和业务级应用。
——– 热闻回顾 ——–
5 个月策反，Kotlin 将取代 Java 成 Android 合作开发第三词汇？
