Vue 3.3.6 发布,得益于WeakMap,它更快了

news2024/11/22 19:50:06

性能改进和DOM节点的附加属性的类型检查使新的Vue值得更新。Vue团队确实做了很多工作。实际上,他们在同一天发布了两个子版本。Vue 3.3.53.3.6 都在2023年10月20日发布。

WeakMaps

其中一个得到改进的是在可能的情况下从 MapsSets 转移到WeakMapsWeakSets

那是什么,为什么这么重要?

如果你在 MapsSets 中存储东西,你会对这些东西做一个引用。这意味着,只要MapSet被使用,这个东西就不会被垃圾收集器从内存中释放。

通常这是有意义的。但有时候不是。特别是当你写一些代码,只是深入到数据的正常工作流中。例如,通过在系统中流动的数据中添加诊断数据。

当你需要时,你希望数据被释放,你不希望保留保留数据的权利。

这就是 WeakMaps WeakSets 开始发挥作用的地方,Vue现在在内部更多地使用这些来防止内存泄漏并提高整体性能。

对 contenteditable="plaintext-only" 的支持

我认为 contenteditable可以是truefalse。但显然,有第三个值 "plaintext-only"

通常,当你将参数设置为true时,你也可以编辑格式,粘贴富文本。使用plaintext-only值则不行。

现在的变化是,Vue不会为HTML规范中定义的合法值抛出 Typescript 错误。

延迟加载图像

再次,这只是对HTML特性的类型支持。它在3.3.5中被添加,并使你能够将img的加载参数设置为lazy

这样,图像不会立即加载,而是当你的浏览器决定你很快就能看到它时加载。

这是一个标准的HTML特性,已经存在了一段时间,但这个修复是一个很好的提醒,用它来提高应用程序的性能。

此版本中还有其他的错误修复和性能改进。

Vue 3.2.40的新功能

Vue的最新版本,受欢迎的Web框架于2022年9月28日发布,为开发者提供了修复的错误,为3.3版本做准备。

错误地禁用按钮

c737bb51e3decdd4bee944c08d20ad84.png

上面的代码说明了按钮不应该被禁用,因为“false”在属性中实际上是一个字符串,而不是一个布尔值。在Vue的最新版本中,它通过检查属性的类型来修复。

V-on不会抛出错误

7107471b002780c774ab4d8be93bf4c8.png

上面的代码和类似的最近抛出了错误,而它们本应该正常工作,它也被修复了。

事件被正确地触发

24ef1ba7194bb6e5f9870f128311f07c.png

上述代码并没有导致 onBlur被调用,而它应该被调用。动态和静态v-on的合并导致这个bug消失。

修复了一个内存泄漏

38323c11a2e132dbb6080559c7886cab.png

在上述情况下,在dev场景中内存没有被正确清理。它是由于提升的 vnodes不正确地保留了DOM节点引起的。现在也修复了。

这些是最有趣的修复,在其他一些与SSR有关的问题也被修复了,团队正在大力工作。

Vue 3.2.41-45 的3个最有趣的错误修复

Vue团队上个月并没有休息。刚刚介绍了Vue 3.2.40,现在已经有了五个新的小版本。下面将带你了解最重要的错误修复。

Vue对奇怪的单文件组件(SFC)抛出错误

传递给单文件组件解析器的代码没有 <template>,也没有<script>。这是有效的HTML代码,但很有可能传递这样的代码表示传递了错误的变量。现在,如果组件不包含<template><script>标签,解析器将抛出错误。

import { parse } from '@vue/compiler-sfc';
const result = parse(`
import a from 'vue'
`);
console.log(result.errors); // []
剥离HTML注释不会导致空白被移除

通常,HTML 对于空白是宽容的。除非它不是,并且布局中断。不幸的是,这种情况发生了,其中一个HTML注释(如下所示)被剥离,而没有被替换为空格。这发生在字符串插值附近。现在已经修复了。

<template>
    <div class="foo">
        <h1>Message:</h1>
        <!-- A comment explaining the interpolation below -->
        {{ msg }}
    </div>
</template>
可以在CSS中使用内联注释

以前,在内联CSS中添加注释会导致下面的CSS规则停止工作。现在,你可以不受问题地使用注释。

<div
    style="
      /* something */
      width: 300px;
      height: 300px;
      background-color: pink;
    "
  ></div>

Vue.js 3.3:优秀的DX和10倍速度的构建

Vue 推出了 3.3 成为了头条新闻。我们都知道,Vue实际上是构建web应用程序的一种非常快速和高效的方式。它能变得更好吗?

31cea8087b90e773f9c8374dc9fe4bb7.png

看起来可以。新版本放宽了 propsemits 类型的规则,使Typescript开发者高兴。现在,定义 emits 也更容易,不需要样板文件。为props提供默认值现在也很简单。

5a52e96c6b23d4d631825d9be1ccd9b2.png

新的 defineModel 使得定义双向绑定更容易。

使用 defineSlots,我们可以为 slots 定义类型,这是一个有用的工具,可以很好地记录代码,并且易于使用。

67992b0d3afb22d195480926896e96fd.png

使用 defineSlots,我们可以为slots定义类型,这是一个有用的工具,可以很好地记录代码,并且易于使用。

我们还可以享受通用组件。

Vue再次显示它关心DX,并且能够快速并直接地构建应用程序,而不需要很多线束。

它也关心性能。现在从 rollup构建中分离类型检查,ESBuild rolloup依赖都组合到根据发布说明的10倍更快的构建时间。

Jest被Vitest替换,意味着现在编写和执行测试将更容易,更快。

更改类型生成器也有助于更精细地提高性能。

总的来说,这是一个很好的版本,涉及到每个人都应该关心的两个主要问题:简化使用和提高性能。

Vue团队每次发布都显示出它是一个生产项目的有价值的框架。它弥补了轻巧、快速、但功能强大和强类型库之间的差距。

凭借像真正的自动导入和快速设置这样的强大工具生态系统,它是现代web应用程序的绝佳选择。

欢迎长按图片加刷碗智为好友,定时分享 Vue React Ts 等。

227067ec7a0c39f68defba215d17812c.png

最后:

vue2与vue3技巧合集

VueUse源码解读

6879025ce5c7489348ea1eba417be222.jpeg

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1145373.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GAMP源码阅读(上)主要类型、后处理流程、RINEX文件读取、卫星位置钟差计算

原始 Markdown文档、Visio流程图、XMind思维导图见&#xff1a;https://github.com/LiZhengXiao99/Navigation-Learning 文章目录 一、GAMP 简介1、程序概述2、工具箱介绍3、函数调用关系4、程序执行流程 二、基础类型定义1、宏定义2、结构体定义3、矩阵、向量、最小二乘、卡尔…

【JAVA学习笔记】50 - Math类,Array类,System类,BigInteger和BigDecimal类

项目代码 https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter13/src/com/yinhai/wrapper_/math_ https://github.com/yinhai1114/Java_Learning_Code/tree/main/IDEA_Chapter13/src/com/yinhai/wrapper_/array_ https://github.com/yinhai1114/Java_Lea…

RSA:基于小加密指数的攻击方式与思维技巧

目录 目录 目录 零、前言 一、小加密指数爆破 [FSCTF]RSA签到 思路&#xff1a; 二、基于小加密指数的有限域开根 [NCTF 2019]easyRSA 思路&#xff1a; 三、基于小加密指数的CRT [0CTF 2016] rsa 思路&#xff1a; 零、前言 最近&#xff0c;发现自己做题思路比较…

NSSCTF web刷题记录3

文章目录 [护网杯 2018]easy_tornado[NSSRound#V Team]PYRCE方法一 cp命令方法二 tar命令 [CISCN 2019华东南]Web4[CISCN 2023 华北]ez_date[GWCTF 2019]你的名字[GKCTF 2020]ez三剑客-easynode [护网杯 2018]easy_tornado 打开题目&#xff0c;发现有三个链接&#xff0c;分别…

20231027 比赛总结

比赛链接 反思 A 感觉不难&#xff0c;出了点小问题也及时解决了&#xff0c;感觉不错 B 对标去年 N O I P T 2 NOIP\;T2 NOIPT2 是吧&#xff0c;卡了我 2 h 2h 2h 不会&#xff0c;一直在想如何构造&#xff0c;甚至开始搜哈密顿路的定理&#xff08; d i r a c dirac…

【iPad已停用】解锁教程

iPad多次输错密码时&#xff0c;会自动锁定并停用&#xff0c;这时候你可以使用iTuens或Tenorshare进行解锁。 一、使用iTunes解锁 下载并安装iTunes 使用数据线将iPad连接上电脑 让iPad进入恢复模式&#xff0c;同时安装iPad电源键和Home键&#xff0c;直到Logo出现也不要松…

Spring Cloud:四 【详细】

目录 统一网关Gateway 网关的实现 搭建网关 编写配置文件 路由断言工程 路由的过滤器 全局过滤器 网关过滤器执行顺序 网关的cors跨域配置 问题及解决 统一网关Gateway 网关的实现 SpringCloud中存在两种网关 gateway&#xff1a;基于Spring5中提供的WebFlux实现&a…

MatlabR2019b安装教程

下载安装包关闭网络。关闭防火墙。在“Windows安全中心”关闭病毒防护。 然后解压安装包。“R2019b_win64”是安装文件&#xff0c;“crack”是破解文件。 进入“R2019b_win64”文件夹&#xff0c;选中“setup”&#xff0c;鼠标右击选择【以管理员身份运行】。 选择【使用文件…

【计算机视觉】图像分割与特征提取——基于Log、Canny的边缘检测

个人简介&#xff1a; > &#x1f4e6;个人主页&#xff1a;赵四司机 > &#x1f3c6;学习方向&#xff1a;JAVA后端开发 > ⏰往期文章&#xff1a;SpringBoot项目整合微信支付 > &#x1f514;博主推荐网站&#xff1a;牛客网 刷题|面试|找工作神器 > &#…

回归算法|长短期记忆网络LSTM及其优化实现

本期文章将介绍LSTM的原理及其优化实现 序列数据有一个特点&#xff0c;即“没有曾经的过去则不存在当前的现状”&#xff0c;这类数据以时间为纽带&#xff0c;将无数个历史事件串联&#xff0c;构成了当前状态&#xff0c;这种时间构筑起来的事件前后依赖关系称其为时间依赖&…

雨云游戏云面板服使用教程我的世界Forge服务端开服教程(翼龙面板)

雨云面板服目前支持一键开服的游戏有&#xff1a;Minecraft Java版、Minecraft 基岩版、泰拉瑞亚、饥荒&#xff0c;还提供纯Java/Linux环境&#xff08;Docker&#xff09;&#xff0c;方便开自己开其他游戏服。 其中Minecraft Java版支持一键开服的有Arclight、Mohist、CatS…

Python基于微博的舆情分析、热搜可视化系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 1. 简介 基于Python Django的微博热搜、微博舆论可视化系统。通过微博舆情分析系统获取到最新微博舆情分析…

Day13力扣打卡

打卡记录 奖励最顶尖的 k 名学生(哈希表排序) 用哈希表对所有的positive与negative词条进行映射&#xff0c;然后遍历求解。tip&#xff1a;常用的分割字符串的操作&#xff1a;1.stringstream配合getline() [格式buf, string, char]2.string.find()[find未找到目标会返回npos…

51单片机-串口

电脑与单片机通过串口交互 设置波特率&#xff08;根据这个代码&#xff0c;去配置urt_Init()&#xff09; 参照上面配置下面这个&#xff0c;然后删掉上面这个代码 使用SUBF进行发送&#xff0c;TI0代表结束&#xff0c;结束后需要复位 下载、打开串口&#xff0c;设置波特率…

AutoCAD 2022安装及激活

下载好AutoCAD2022安装文件后&#xff0c;直接解压&#xff0c;会看到这个名字的安装文件AutoCAD_2022_Simplified_Chinese_Win_64bit_dlm.sfx&#xff0c;我们双击打开就会进入安装过程。 安装文件需要自解压&#xff0c;我们默认到C盘就可以了&#xff0c;这些文件我们在安装…

exFAT文件系统的目录与文件存储

目录与文件存储的差异 在exFAT文件系统中&#xff0c;目录和文件的存储方式是不同的。 目录和文件都是以簇&#xff08;Cluster&#xff09;为单位进行存储&#xff0c;但它们的数据结构和用途不同。 目录的存储&#xff1a;目录&#xff08;子目录&#xff09;是用于组织和管…

linux入门---多线程的控制

目录标题 线程库pthread_create如何一次性创建多个线程线程的终止线程的等待线程取消分离线程如何看待其他语言支持的多线程线程id的本质线程的局部存储线程的封装 线程库 要想控制线程就得使用原生线程库也可以将其称为pthread库&#xff0c;这个库是遵守posix标准的&#xf…

Servlet 与Spring对比!

前言&#xff1a; Spring相关的框架知识&#xff0c;算是目前公司在用的前沿知识了&#xff0c;很重要&#xff01;&#xff01; 那么以Spring为基础的框架有几个&#xff1f; 以Spring为基础的框架包括若干模块&#xff0c;其中主要的有Spring Framework、Spring Boot、Spring…

三十八、【进阶】最左前缀法则

1、理解 最左前缀法则&#xff0c;如果索引了多列(联合索引)&#xff0c;要遵守最左前缀法则&#xff0c;最左前缀法则是致&#xff0c;查询从索引的最左列开始&#xff0c;并且不跳过索引中的列。 如果跳过某一列&#xff0c;索引将部分失效(该索引后面的字段索引全部失效)。 …

锐捷EG易网关 phpinfo.view.php 信息泄露

致未经身份验证获取敏感信息 访问漏洞url&#xff1a; /tool/view/phpinfo.view.php漏洞证明&#xff1a; 文笔生疏&#xff0c;措辞浅薄&#xff0c;望各位大佬不吝赐教&#xff0c;万分感谢。 免责声明&#xff1a;由于传播或利用此文所提供的信息、技术或方法而造成的任何…