写点什么

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:166033

评论

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

智能体的奇幻漂流之“成都折叠”篇

脑极体

Java源码系列3——LinkedHashMap

超超不会飞

Java

在 InfoQ 兼职做运营

邓瑞恒Ryan

创业 用户增长 创业心态 运营 产品运营

我一定是熬夜熬傻了,小程序后台获取用户信息居然发生了这件事

小Q

Java 小程序 学习 编程 架构

架构师训练营第三周作业

邓昀垚

极客大学架构师训练营

Greenplum 性能优化之路 --(三)ANALYZE

腾讯云大数据

大数据 数据仓库

FastDFS 分布式文件系统详解

哈喽沃德先生

文件系统 分布式文件存储 fastdfs 分布式文件

传统网络缺失货币层,比特币是否能担此大任?

blockchain

比特币 区块链 数字货币 比特币数字货币 区块俩金融

架构师训练营 1 期 - 第三周 - 设计模式

三板斧

极客大学架构师训练营

【架构笔记之设计模式】架构师训练营第1期第3周

业哥

极客大学架构师训练营

Dromara团队发布Hmily全新架构的2.1.1版本

猫大人

分布式事务 分布式柔性事务‘’

码住!Flink Contributor 速成指南

Apache Flink

flink 开源社区

一个Hibernate的事务问题

YoungZY

hibernate

Nexmark: 如何设计一个流计算基准测试?

Apache Flink

flink

架构师训练营第1期第3周作业

业哥

极客大学架构师训练营

一个好系统自我完善自我进化的方法

boshi

产品思维 系统工程 即时反馈 生态体系

Java源码系列2——HashMap

超超不会飞

Java

【FastDFS】SpringBoot整合FastDFS实战,我只看这一篇!!

冰河

springboot fastdfs

太牛了,这份神仙级面试笔记把所有 Java 知识面试题都详解出来了

Java架构之路

Java 程序员 面试 编程语言

Greenplum 性能优化之路 --(二)存储格式

腾讯云大数据

大数据

CSS语法与规则 — 重学CSS

三钻

CSS 大前端

Java源码系列4——HashMap扩容时究竟对链表和红黑树做了什么?

超超不会飞

Java

Smartisan

Changing Lin

摄影

高中生写LOL外挂1年狂赚五百万,落网前刚买下120万保时捷

Java架构师迁哥

优秀组织的5大表现

凌晞

团队管理 团队组织 组织

烦人的Null,你可以走开点了

四猿外

Java 注解 空指针 Optional null

基于 Flink + Hive 构建流批一体准实时数仓

Apache Flink

flink

架构师训练营第 1 期第 3 周学习总结

好吃不贵

极客大学架构师训练营

2020互联网公司中秋礼盒大比拼!(文末送福利)

Java架构师迁哥

鲲鹏播种于时代,花开五色中原

脑极体

经常使用的数据结构

hasWhere

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