作者 | Diogo Souza 译者 | 王强
JavaScript 已成为庞大、多样化并快速发展的编程语言。每当 JS 的框架或库发布更新,社区中与之相关的项目也会随之作出改进——Vue.js 及其附属项目就是典型例子。
Vuex 是简单直观的状态管理服务,但它的更新步伐是跟随 Vue.js 的,所以有时新版 Vue.js 的功能会迟一些才能获得 Vuex 的支持。
例如,原生移动应用已经广泛流行。许多 JavaScript 项目都有对应的库和框架等组件来开发应用。
和 Vue 类似,NativeScript-Vue 也是一个 NativeScript 插件,让开发者可以使用 Vue 来制作移动应用。Vuex 还可以与 NativeScript-Vue 集成,以便与组件的状态机一起使用,但它缺乏良好的调试机制。
Vuex 的 3.1.1 版本已经开始处理这个问题了。除了支持在 NativeScript 应用中调试Vuex 之外,这一版更新还有很多改进,例如纳入 jsDelivr CDN npm 包,并修复了模块注册的内存泄漏错误等。这个版本没有重大改动,所以升级项目时无需担心。
你可以查看更新日志 和官宣资料、贡献者提交内容来了解更多信息。下面我们具体看一下。
支持在 NativeScript 应用中调试 Vuex
Vue-remote-devtools 是使用 Vue.js 开发 NativeScript 应用的官方 Vue 开发工具应用。它基于 Node.js 和 Chromium,让开发者可以轻松调试 HTML/CSS/JS 应用(这里的例子则是 Vue):
此外,vue-devtools 是一个用于调试基于 Web 的 Vue 应用的浏览器扩展,可以与 Vuex 及其状态管理库无缝集成,让开发者可以可视化之前的状态并在它们之间来回切换。这对所谓时间旅行调试的流程非常有用(例如,你可以在各个状态间进退自如)。
但对于 NativeScript 项目来说,这一版本之前是没有这个功能的。现在开发者可以在非浏览器环境下检查 Vuex 状态。如果你不太了解 Vuex 状态管理,可以参阅此处链接了解更多信息: /guide/state.html
相关链接:
vue-devtools: /vuejs/vue-devtools
Vuex 状态 : /vuejs/vuex/pull/1404
为浏览器提供的新的缩小器和 ES 模块
在 ES 模块出现之前,开发者通常会将 JavaScript 代码像下面这样导入 HTML 页面:
这种导入 JS 库的经典方法有一些缺陷:每次导入的顺序必须是正确的;如果顺序不正确,下面的脚本就会找不到依赖项。这种方法还将对象和函数暴露给了全局命名空间,因此任何人都可以访问并更改它们。此外你还可能犯导入文件两次的错误——缺陷还不止这些。
Vue 就遇到了这个问题。在 2.6 版之前,它在构建过程中没有专门在浏览器中加载 Vue 模块的步骤。所以下面这样的代码是不行的:
结果从 2.6 版开始,因为现在所有人都会在浏览器中使用 ES 模块,Vue 在构建流程中加入了这一步。
此外 Vuex 也面临相同的问题,但到了 3.1.1 版本才得到解决。现在要将 Vuex 直接导入浏览器,只需使用:
// Or below for the min version
此外该版本还加入了名为 Terser 的新的缩小器。这是因为之前的缩小器 UglifyJS 不再维护了,而且后者只支持 ECMAScript 5,而 Terser 支持 ES6+。
对于开发者来说这没什么区别。另外,因为 Terser 是 UglifyJS 的一个分支,所以它保持了对 uglify-es 和 uglify-js@3 的 API 和 CLI 兼容性的支持。
相关链接:
Terser: /terser-js/terser
支持 jsDelivr
jsDelivr比大多数 CDN 都快得多(详细对比见下方链接)。现在,你还可以从 jsDelivr 导入 Vuex 3.1.1。
相关链接:
CDN 性能分析和对比: /
修复注册/ 注销模块时内存泄漏问题
模块可以把我们的商店分成更小和更可控的部分,因为整个状态包含在 Vuex 中的一个大对象里。要在商店中添加或删除模块,我们只需要分别调用 store.registerModule 或 store.unregisterModule 即可。
但在大型应用中管理浏览器内存可能有点棘手。 这有一个已知问题,需要一个应用程序添加数百个模块并在之后立即取消注册,这导致堆内存未被清除。 你可以想象下一步会发生什么...... 内存泄漏。
这一版的修复会简单地在函数 resetStoreVM 中对 oldVm 实例做垃圾回收,该函数负责在高峰期活动之后恢复 vm。
小结
完整更新列表可参阅此处(其中还有之前版本的更新介绍): /vuejs/vuex/releases
如果你希望了解有关 Vuex 的更多信息,请参阅其官方入门指南: /guide/
英文原文: /whats-new-in-vuex-3-1-1-d796b0c791bf
课程推荐
前端领域的技术演进一直要比其他技术快一些,这给前端工程师带来持续的挑战。这里整理了从 Vue 到 React、iOS 到 Andoid、再到前端架构体系的干货课程,带你解读从前端小工到专家的实战心法,高效解决 80% 的开发难题。