写点什么

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

评论

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

低代码平台包罗万象,企业应该如何做出抉择?

ToB行业头条

如何成为一个好的设计师 or 程序员?

宇宙之一粟

读书笔记 设计 技巧 知识 9月月更

史上最全大厂面试题复盘总结,全会进大厂拿35K没问题(Java岗)

收到请回复

Java 云计算 开源 架构 编程语言

【Go】go build失败,报方法undefined

非晓为骁

Go 编译 go build

LED显示屏人屏互动未来已来

Dylan

户外LED显示屏 led显示屏厂家

教你如何用CSS修改图片颜色

千锋IT教育

面试官:说说Java并发运行中的一些安全问题

Java-fenn

Java

如何快速开发灵活自定义报表

力软低代码开发平台

C++ 中 Lambda 表达式的快速指南

Java-fenn

Java

通过自动化单元测试的形式守护系统架构

京东科技开发者

系统架构 单元测试 代码评审 代码质量检测工具 Archunit

设计模式之备忘录模式

Java-fenn

Java

Java 异步编程 (5 种异步实现方式详解)

Java-fenn

Java

拼多多、蚂蚁、字节2022届(大三)后端研发暑期实习

Java-fenn

Java

大数据培训机构如何选择

小谷哥

Java培训可以从事哪些工作

小谷哥

深入浅出用户态协议栈

C++后台开发

后台开发 TCP/IP 网络协议栈 C++开发 用户态协议栈

在武汉Java培训费用多少

小谷哥

深圳web前端培训费用多少?

小谷哥

21个大厂Offer?这份“Java核心技能精讲”轻松收割

收到请回复

Java 云计算 开源 架构 编程语言

快速构建基本的SpringCloud微服务

Java-fenn

Java

mysql优化---如何搭建mysql的主从关系和mycat中间件

Java快了!

C++ 左值引用与 const 关键字

Java-fenn

Java

【CSM认证】11月1-4日在线工作日班 | 全国招生

ShineScrum捷行

项目管理 Scrum Scrum Master 敏捷项目管理

女生参加java培训前景如何

小谷哥

字节二面:Redis 的大 Key 对持久化有什么影响?

程序知音

Java 数据库 redis 字节跳动 面试

与未来对话:PingCAP 用户峰会亮点全放送

PingCAP

#TiDB

阿里分布式全栈手册,整整1000页,太顶了

程序知音

Java 架构 分布式 阿里 后端技术

Go 语言为什么建议定义零值可用的结构体?

Java-fenn

Java

【荣耀帐号服务】手把手教你快速上手快应用接入

荣耀开发者服务平台

数据库 前端 手机 服务器 honor

京东云无线宝产品部负责人张晓东 : 京东云无线宝与开源的亲密关系 | 《大神详解开源 BUFF 增益攻略》讲座回顾

Apache IoTDB

物联网 京东云 企业号九月金秋榜

6个月我从小厂逆袭,薪资上涨70%,坐上美团L8技术专家!

收到请回复

Java 云计算 开源 架构 编程语言

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