javascript自执行函数-Vue.js2.5 发布

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

点击上方“CSDN”，选择“热门公众号”

关键时刻，尽快交付！

就在友达微博预告“将引入 TypeScript 的一些改进”一周后，代号 LevelE 的 Vue.js2.5 带着日式风格来到了我们身边。 从ReleaseNotes中可以看到，Vue.js2.5具有更好的TypeScript集成、更好的错误处理、对单文件组件中功能组件的更好支持以及与环境无关的服务器端渲染。 详情如下：

更好的 TypeScript 集成

感谢 TypeScript 团队的帮助，2.5 提供了大大改进的类型声明：

注意：TypeScript 用户还应该将以下软件包更新到最新版本javascript自执行函数，以便它们与类型声明兼容：vue-router、vuex、vuex-router-sync 和 vue-class-component。

更好的错误处理

在2.4及之前的版本中，我们一般使用全局的config.errorHandleroption来处理应用程序中的意外错误。 我们还有 renderError 组件选项来处理渲染函数中的错误。 此外，我们缺乏一种机制来处理应用程序特定部分中的库错误。

在 2.5 中，我们引入了新的 errorCaptured 钩子。 具有此钩子的组件捕获其子组件树中的所有错误（不包括其自身）（不包括异步反弹中调用的错误）。 如果你熟悉 React，这类似于 React 16 中引入的错误边界（#introducing-error-boundaries）的概念。该钩子接受与全局 errorHandler 相同的参数，你可以使用这个钩子来优雅地处理并显示错误（#error-handling-with-errorcaptured-hook）。

更好地支持SFC中的功能组件

使用 vue-loader >= 13.3.0 和 Vue 2.5，*.vue 文件中定义为单文件组件的功能组件现在可以获得正确的模板编译、ScopedCSS 和热重载支持。 这使得将叶组件转换为功能组件以实现性能优化变得更加容易。

独立于环境的服务器端渲染

vue-server-renderer 的默认构建假定 Node.js 环境javascript自执行函数，这使得它在某些 JavaScript 运行时（例如 php-v8js 或 Nashorn）中不可用。 在 2.5 中，我们已经发布了与环境无关的 vue-server-renderer 版本，可以在浏览器或纯 JavaScript 引擎中使用。 这可以开辟有趣的策略，例如直接在 PHP 进程中使用 Vue 服务器端渲染。

同样，建议您查看完整的发行说明以了解其他 API 改进，包括 v-on、v-model、scopedslot、provide/inject 等。

Vue2.5.0源码下载：

Vue.js 这个渐进式 JavaScript 框架自 2013 年发布以来，以其简单的句子设计和轻量快速的特点受到了技术社区的喜爱。 在国外已经得到了广泛的应用和拓展，比如饿了么的开源组件库ElementUI就是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工具为开发者提供了QuickStart示例代码。 开发者只需要执行简单的命令即可获得可运行的项目。

为什么选择mpVue

小程序公测之初，我们计划快速迭代一个对标H5的产品实现。 其核心要求是快速实施、代码复用、低成本、高效率。 此后，我们经历了多个小程序的建设。 结合业务场景、技术选型和小程序开发方法，我们总结了开发阶段面临的主要问题：

组件化机制不够健全；

缺乏代码复用能力；

小程序框架与团队技术栈没有有机结合；

学习小程序的成本还不够低。

具体表现为：

另一方面，小程序的开发方式与H5类似，因此我们考虑与H5进行代码复用。 同时，经过团队的技术栈选型，我们确定了Vue.js作为小程序开发规范。 使用Vue.js打开好友程序，会直接带来以下开发效率的提升：

H5代码只需极少的改动即可复用为小程序；

使用Vue.js组件机制开放一流的程序，可以实现小程序和H5组件的复用；

技术栈统一后，学习小程序的成本增加，开发者从H5切换到小程序不需要学习更多；

代码维护成本增加，而Vue.js代码允许所有后端直接参与开发和维护。

为什么选择 Vue.js？ 这取决于团队的技术栈选择。 新选型的推出与统一技术栈和开发效率的提升脱节，与开发工具服务业务的初衷背道而驰。

mpVue 的演变

mpVue的创建从业务场景和需求出发，最终的解决方案经历了三个阶段。

mpVue设计思路

Vue.js和小程序都是典型的逻辑视口框架。 逻辑层和视口之间的工作方式是：数据变化驱动视图更新； 视图交互触发风暴，风暴响应函数更改数据并再次触发视图更新。 如图1所示。

图1 小程序实现原理

鉴于Vue.js和小程序的工作原理一致，我们考虑将小程序的功能托管给Vue.js，并在合适的时候同步数据变化到小程序，从而达到运行好朋友的目的。 这样我们就可以专注于Vue.js，并参考Vue.js来编译相应的小程序代码。 小程序负责视口显示，所有业务和逻辑汇聚到Vue.js中，Vue.js数据变化再同步到小程序，如图2。这样我们就获得了打开好友程序的能力以 Vue.js 的形式。 因此，我们设计的解决方案如下：

图2mpVue实现原理

Vue代码：

将小程序页面编译为Vue.js实现；

使用Vue.js开发规范实现父子组件关联。

小程序代码：

根据小程序开发标准编写视口模板；

配置生命周期函数并调用关联数据更新；

将 Vue.js 数据映射到小程序数据模型。

在此基础上增加了以下机制：

Vue实例与小程序页面实例关联；

小程序和Vue生命周期建立映射关系，可以在小程序生命周期中触发Vue生命周期；

小程序封包构建了代理机制，并在封包代理功能中触发对应的Vue组件封包响应。

这个机制总结起来很简单，但是实现起来却相当复杂。 在解密具体实现之前，读者可能会有一些疑惑：

同时维护Vue.js和小程序，是否需要编写两个版本的代码实现？

该小程序负责视口解释。 还需要Vue.js的viewport吗？ 如果不是，应该怎么办？

如何打通生命周期，如何实现数据同步和更新？

上述问题包含了mpVue框架的核心内容，下面将详细讲解。 首先，mpVue的诞生就是为了提高效率。 它提供了手动生成小程序代码的能力。 小程序代码根据Vue.js代码重构，无需同时开发两套代码。

Vue.js 视口渲染是通过 Render 方法完成的，并在显存中维护一个虚拟 DOM。 mpVue不需要使用Vue.js来完成视口渲染，因此我们更改了Render方法以严格禁止视口渲染。 熟悉源码的读者都知道，VueRunTime有多个平台实现，不仅有我们常见的Web平台，还有Weex。 从今天开始，我们发布了新平台 mpVue。

再看第三个问题，生命周期和数据同步是mpVue框架的灵魂。 Vue.js和小程序的数据是相互隔离的，并且各自有不同的更新机制。 mpVue从生命周期和风暴反弹功能入手，实现Vue.js触发数据更新时的数据同步。 小程序通过视口呈现给用户，并通过暴风雨响应用户交互。 Vue.js 在后台维护数据更改和逻辑。 可以看到，数据更新源自小程序，由Vue.js处理。 Vue.js数据变更后同步到小程序。 为了实现数据同步，mpVue改变了Vue.jsRunTime实现，减少了Vue.js生命周期中更新小程序数据的逻辑。

用户交互触发的数据更新是通过storm代理机制完成的。 在Vue.js代码中，风暴响应函数对应组件的方法，Vue.js手动维护上下文环境。 但小程序中并没有类似的机制，而且由于 Vue.js 执行环境维护了一个实时的虚拟 DOM，这与小程序的视口完全对应。 我们以为，在小程序组件节点上触发风暴后，只要在虚拟DOM上找到对应的节点，触发对应的风暴就完成了。 如果Vue.js风暴响应触发数据更新，则会手动触发其生命周期函数更新。 如果在该功能上同步更新小程序数据，就实现了数据同步。

如何使用mpVue

mpVue 框架本身由多个 npm 模块组成。 入口模块已经处理了依赖关系。 开发者只需执行以下代码即可完成本地项目创建。

#安装vue-cli

$npminstall--globalvue-cli

#根据模板项目创建本地项目。 目前为外网地址，暂时开放。

$vueinit'bitbucket:xxx.meituan.com:hfe/mpvue-quickstart'--clonemy-project

#安装依赖并开始手动构建

$cdmy-项目

$npm安装

$npmrundev

执行上述命令后，会在当前项目的dist子目录下创建小程序目标代码。 使用小程序开发者工具加载dist目录，开始本地调试和预览。

示例项目遵循 Vue.js 模板项目规范，并通过 Vue.js 命令行工具 vue-cli 创建。 代码组织方式与官方Vue.js实例一致。 我们为小程序定制了Vue.jsRunTime和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框架的目标是通过Vue.js将小程序和H5开发方式关联起来，实现最大程度的代码复用。 但由于平台差异的客观存在（主要集中在实现机制和底层API能力的差异），我们很难做到100%的代码复用，并且重建平台不同部分的成本也难以避免。 对于代码复用场景，开发者需要重点关注以下问题并做好规划：

尝试使用平台上没有的句型功能。 这些功能不需要转换和适配成本；

防止使用不支持的句子特征，如槽位、过滤器等，增加改造成本；

如果使用特定平台API，可以考虑体现适配层socket，通过切换底层实现来完成平台转换。

mpVue 最佳实践

表2中，我们对陌陌小程序、mpVue、WePY这三种开发框架的主要能力和特点进行了纵向比较，帮助您了解不同框架的优缺点，并根据业务确定技术方案场景和开发习惯。 我们总结了一些如何更好地使用mpVue进行小程序开发的最佳实践。

表2 框架主要能力和特点对比

使用vue-cli命令行工具创建项目，使用Vue2.x句型规范进行开发；

防止使用框架不支持的句型特征。 也就是有些Vue.js的句型很难在小程序中使用。 尝试在 mpVue 和 Vue.js 之间共享功能；

合理设计数据模型，实现对数据更新和操作的细致控制，防止性能问题；

正确使用组件来打开一流的程序并增强代码重用。

结论

mpVue框架早已在业务项目中得到实践和验证，目前开发文档已经到位。 我们正在开源之前制定最终计划。 我们希望为小程序和Vue.js生态做出贡献。 mpVue的初衷是让Vue.js开发者能够低成本接入小程序开发。 其能力和用户体验还有待进一步测试。 未来，我们将不断扩展现有功能，解决用户问题和需求，优化开发体验，完善周边生态建设，帮助更多开发者。

需要说明的是，mpVue是通过forkVue.js源码重新开发的，重新减少了mp平台的Vue.js实现。 我们保留跟随Vue.js版本升级的能力，希望未来能够实现更好的能力提升。 最后感谢Vue.js框架和陌陌小程序给业界带来的便利。