红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

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

评论

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

互动直播应用快速开发实践(基于声网)

大伟

图灵奖得主大全 深度学习经典论文翻译合集 John 易筋 ARTS 打卡 Week 62

John(易筋)

ARTS 打卡计划

信息爆炸!78天闭门深造千页SpringCloud,再战京东

Java~~~

Java spring 架构 面试 Spring Cloud

Golang并发操作中常见的死锁情形

Regan Yue

协程 Go 语言 8月日更

最近很火的低代码到底是什么?

禅道项目管理

低代码 可视化 低代码平台

【浪潮云说】直播间第七期今日准时开播!

浪潮云

云计算运维

Hadoop MapReduce原理、序列化

Mike

训练千亿参数模型的法宝,昇腾CANN异构计算架构来了~

华为云开发者联盟

盘古 CANN 千亿参数模型 异构计算 计算架构

自主创新国产化科技:智能制造之 SMT 产线监控管理可视化

一只数据鲸鱼

数据可视化 工业4.0 制造业 智慧工厂

开源demo| 视频应用类开源 Demo 大盘点

anyRTC开发者

音视频 视频直播 直播连麦 视频通话

接口测试,负载测试,并发测试,压力测试区别

与风逐梦

软件测试 接口测试

故事点数VS工时,研发工作量到底怎么算?

LigaAI

敏捷开发 故事点数 工时 研发工作量

数仓出现“wait in ccn queue”的时候,怎么迅速定位处理?

华为云开发者联盟

线程 hash 负载 数仓 GaussDB(DWS)

三面阿里被挂,竟获内推名额,历经5面拿下口碑offer(Java后台)

Java 程序员 架构 面试 计算机

阿里巴巴新产“Java架构核心宝典”,全是流行技术,限时开放

Java 架构 面试 后端 计算机

膜拜!首次公布Java10W字面经,Github访问量破百万

Java~~~

Java 架构 面试 微服务 多线程

啥?阿里DBA团队总监把MySQL 性能调优 金字塔,写进了800页笔记?

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

云小课|原来云备份不仅仅是能备份...

华为云开发者联盟

云备份 迁移数据 复制备份

易华录 X ShardingSphere|葫芦 App 后台数据处理的逻辑捷径

SphereEx

数据库 开源

突破四大要素  飞算SoFlu助力企业实现DevOps落地

SoFlu软件机器人

DevOps 自动化 软件工程

一起吐槽接口文档

FunTester

接口文档 接口测试 API Jira FunTester

CompletableFuture真香,可以替代CountDownLatch!

架构 面试 后端 计算机

一个内核漏洞详解:容器逃逸

程序员 架构 面试 计算机

叹服!阿里自述SpringCloud微服务:入门+实战+案例

Java~~~

Java spring 架构 面试 Spring Cloud

国产接口工具ApiPost如何利用CryptoJS对请求参数进行MD5/AES加解密

Proud lion

大前端 后端 加密解密 Postman 接口文档

springboot+cloud实战派PDF让开发和微服务架构像喝水一样简单

Java~~~

Java spring 架构 面试 Spring Boot

带你走进MySQL全新高可用解决方案-MGR

vivo互联网技术

数据库 分布式 MySQL 高可用

最近很火的低代码到底是什么?

禅道项目管理

大前端 测试开发 语言 & 开发

解析ThreadPoolExecutor类是如何保证线程池正确运行的

华为云开发者联盟

线程池 任务 注释 Worker类

百度信誉认证中台架构解析

百度Geek说

后端 软件架构 中台架构

🏆【Alibaba微服务技术系列】「Dubbo3.0技术专题」回顾Dubbo2.x的技术原理和功能实现及源码分析(温故而知新)

洛神灬殇

dubbo RPC 8月日更 Dubbo3

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