对中国开发者最具吸引力的科技企业有哪些?快来为你 pick 的企业投票! 了解详情
写点什么

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

2019 年 5 月 23 日

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 年 5 月 23 日 18:165329

评论

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

【架构师训练营 - 周总结 -3】设计模式、重构

小动物

总结 极客大学架构师训练营 第三周

【week03】作业1

chengjing

从单机事务到分布式事务

ElvinYang

代码重构练习三

李广富

week 3

陈皮

当教育遇上区块链,会擦出什么样的火花?

CECBC区块链专委会

区块链技术 去中心化 防篡改 教育资源共享

架构师训练营第三周课后作业

竹森先生

极客大学架构师训练营

架构师训练营Week03

Frank Zeng

week3

Geek_2e7dd7

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

方舟勇士

课程总结

【架构师训练营 - 作业 -3】组合模式

小动物

极客大学架构师训练营 作业 第三周

架构师训练营week3学习总结

Frank Zeng

Week 03- 作业一:设计模式

dean

极客大学架构师训练营

用于可视化软件体系结构的C4模型(转载)

清风徐徐

第三周作业

戴维斯

极客大学架构师训练营

奈学教育《百万架构师》课程大纲

奈学教育

极客大学架构师训练营

奈学教育《百万架构师》课程大纲

古月木易

极客大学架构师训练营

组织协同-研发项目责任矩阵

飞哥

研发管理 团队组织

第三周作业

andy

week3 学习总结

不在调上

极客大学架构师训练营

瓷都景德镇牵手蚂蚁区块链,重塑非遗陶瓷产业

CECBC区块链专委会

区块链技术 溯源 防篡改 景德镇 非遗

有益思考一则:概率与格局

石君

思考 思维方式 格局

项目交付二三事

飞哥

持续交付

【week03】总结

chengjing

元年云“宽能力”拓宽成长型企业数字化升级之路

人称T客

Tweak原理与越狱防护

大冯宇宙😏😏

中心化是人性,去中心化是技术

CECBC区块链专委会

区块链技术 去中心化 超级节点

第三周总结

andy

week3 作业& 手撕单例模式

不在调上

大白话Java多线程,小白都能看的懂的哦

java金融

Java 多线程 线程安全 创建线程方式 什么是多线程

万恶的NPE差点让我半个月工资没了

java金融

Java 程序员 互联网 NPE 空指针

滴滴 Logi 日志管理与分析平台

滴滴 Logi 日志管理与分析平台

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