限时领|《AI 百问百答》专栏课+实体书(包邮)! 了解详情
写点什么

Vuex3.1.1 更新:支持 jsDelivr,修复内存泄漏

  • 2019-05-23
  • 本文字数:1759 字

    阅读完需:约 6 分钟

Vuex3.1.1更新:支持jsDelivr,修复内存泄漏

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状态管理,可以参阅此处链接了解更多信息:


https://vuex.vuejs.org/guide/state.html

为浏览器提供的新的缩小器和 ES 模块

在 ES 模块出现之前,开发者通常会将 JavaScript 代码像下面这样导入 HTML 页面:


<script src="https://some-cdn.com/vue.js"></script><script>new Vue();</script>
复制代码


这种导入 JS 库的经典方法有一些缺陷:每次导入的顺序必须是正确的;如果顺序不正确,下面的脚本就会找不到依赖项。这种方法还将对象和函数暴露给了全局命名空间,因此任何人都可以访问并更改它们。此外你还可能犯导入文件两次的错误——缺陷还不止这些。


Vue 就遇到了这个问题。在 2.6 版之前,它在构建过程中没有专门在浏览器中加载 Vue 模块的步骤。所以下面这样的代码是不行的:


<script type=”module” src=”vue.esm.js”></script>
复制代码


结果从 2.6 版开始,因为现在所有人都会在浏览器中使用 ES 模块,Vue 在构建流程中加入了这一步。


此外 Vuex 也面临相同的问题,但到了 3.1.1 版本才得到解决。现在要将 Vuex 直接导入浏览器,只需使用:


<script type=”module” src=”vuex.esm.browser.js”></script>// Or below for the min version<script type=”module” src=”vuex.esm.browser.min.js”></script>
复制代码


此外该版本还加入了名为 Terser 的新的缩小器。这是因为之前的缩小器 UglifyJS 不再维护了,而且后者只支持 ECMAScript 5,Terser支持 ES6+。


对于开发者来说这没什么区别。另外,因为 Terser 是 UglifyJS 的一个分支,所以它保持了对 uglify-es 和 uglify-js@3 的 API 和 CLI 兼容性的支持。

支持 jsDelivr

jsDelivr比大多数CDN都快得多。现在,你还可以从 jsDelivr 导入Vuex

修复注册/注销模块时内存泄漏问题

模块可以把我们的商店分成更小和更可控的部分,因为整个状态包含在 Vuex 中的一个大对象里。要在商店中添加或删除模块,我们只需要分别调用 store.registerModule 或 store.unregisterModule 即可。


但在大型应用中管理浏览器内存可能有点棘手。 这有一个已知问题,需要一个应用程序添加数百个模块并在之后立即取消注册,这导致堆内存未被清除。 你可以想象下一步会发生什么…内存泄漏。


这一版的修复会简单地在函数 resetStoreVM 中对 oldVm 实例做垃圾回收,该函数负责在高峰期活动之后恢复 vm。

小结

完整更新列表可参阅此处(https://github.com/vuejs/vuex/releases),其中还有之前版本的更新介绍。如果你希望了解有关 Vuex 的更多信息,请参阅其官方入门指南:


https://vuex.vuejs.org/guide/


英文原文:


https://blog.logrocket.com/whats-new-in-vuex-3-1-1-d796b0c791bf



2019-05-23 18:166005

评论

发布
暂无评论
发现更多内容

新 Chrome 插件可检测 AI 伪造声音;Canary Speech 推出用于临床对话的语音分析技术丨 RTE 开发者日报

声网

拼多多商品详情数据接口:技术员的探索与实践

tbapi

拼多多API接口 拼多多商品详情数据接口 拼多多商品数据采集 拼多多商品详情API

鸿蒙网络编程系列15-域名解析示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

鸿蒙网络编程系列17-网络状态监测示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

鸿蒙网络编程系列18-Web组件加载网页的四种方式示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

鸿蒙网络编程系列19-获取网络连接信息并选择一种绑定到应用示例

长弓三石

DevEco Studio 开发实例 网络与连接

鸿蒙网络编程系列21-使用HttpRequest上传任意文件到服务端示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

阿里巴巴商品详情API返回值中的促销与优惠信息

技术冰糖葫芦

API 接口 API 文档 API 测试 API 性能测试

鸿蒙网络编程系列22-Web组件文件上传示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

Qwik-能帮你移出项目中99%的JS代码

天翼云开发者社区

SSR Qwik.js

鸿蒙网络编程系列25-TCP回声服务器的实现

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

浅谈混合云的特点及管理

天翼云开发者社区

云计算 私有云 混合云

和鲸社区数据科学实训季,西安交通大学圆满收官,西安,后会有期!

ModelWhale

Python 人工智能 数据科学 实训 和鲸社区

一文详解 MySQL 中的间隙锁

emanjusaka

MySQL gap lock

应对复杂架构下的监控挑战?统一运维可观测能力是关键!

袋鼠云数栈

云计算 可观测性

鸿蒙网络编程系列20-解决web组件加载网页白屏示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

鸿蒙网络编程系列23-实现一个基于鸿蒙API的HTTP服务器

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

鸿蒙网络编程系列24-Web组件与应用互操作示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

鸿蒙网络编程系列26-HTTPS证书自选CA校验示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

NFT区块游戏系统开发: 构建与创新指南

区块链软件开发推广运营

交易所开发 dapp开发 链游开发 NFT开发 公链开发

鸿蒙网络编程系列16-获取Wifi信息示例

长弓三石

DevEco Studio 开发实例 HarmonyOS NEXT 网络与连接

质押挖矿系统开发搭建: 数字资产增值的秘密武器

区块链软件开发推广运营

交易所开发 dapp开发 区块链开发 链游开发 代币开发

Vuex3.1.1更新:支持jsDelivr,修复内存泄漏_语言 & 开发_Diogo Souza_InfoQ精选文章