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

性能改进和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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

centos服务器搭建安装Gitlab教程使用教程

1、更新服务器&#xff1a; sudo yum update -y && sudo yum upgrade -y 2、下载Gitlab的RPM包 https://packages.gitlab.com/gitlab/gitlab-cece表示开源el表示centos 选64位el8对应CentOS8 本教程以centos8为例&#xff0c;在服务器中&#xff0c;下载centos8的…

计算机网络【CN】TCP报文段格式【20B】

序号&#xff1a;本报文段所发送的数据的第一个字节的序号确认号&#xff1a;期望收到对方下一个报文段的第一个数据字节的序号。 重要控制位&#xff1a; 紧急位URG&#xff1a;URG1时&#xff0c;标明此报文段中有紧急数据&#xff0c;是高优先级的数据&#xff0c;应尽快传送…

MediaPlayer

1、概念 MediaPlayer是Android原生的多媒体播放器&#xff0c;可以用它来实现本地或者在线音视频的播放。 2、MediaPlayer的状态 下面的图是官方给出的状态转换图&#xff0c;也可易理解为MediaPlayer的生命周期。 椭圆形&#xff1a;表示MediaPlayer的状态&#xff1b;弧形…

Python环境下LaTeX数学公式转图像方案调研与探讨

目录 引言方案一&#xff1a;基于LaTeX环境方案二&#xff1a;基于KaTeX(推荐) 方案三&#xff1a;基于Matplotlib写在最后 引言 近来&#xff0c;涉及到一些公式识别的项目&#xff0c;输入是公式的图像&#xff0c;输出是LaTeX格式的数学公式字符串。 这类项目一般都采用深…

基于Pytorch的驾驶员分心行为实时检测

本文使用深度学习和Pytorch(PyTorch 2.0.1\Torchvision 0.15.2)实时检测驾驶员的分心行为,并附录完整代码。 检测分心驾驶是现代汽车中最重要的功能之一。无论是自动驾驶汽车还是其它高端汽车,都配备了驾驶员监控系统,以持续跟踪驾驶员的行为。这对确保驾驶员保持目光在道路…

前端技术知识(含八股)总结 - 持续更新中

前端技术知识&#xff08;含八股&#xff09;总结 - 持续更新中 参考文献1.HTML和CSS1.1 语义化标签1.2 CSS 选择器及优先级 / position 定位 / box-sizing 属性 / transition / 继承属性&#xff08;如字体文字类的属性大部分有继承&#xff09;/ 行内元素和块级元素 / html的…

【git】git使用教程

1、版本管理工具 如果有一个软件能记录我们对文档的所有修改&#xff0c;所有版本&#xff0c;这类软件我们一般叫做版本控制工具。 特性“ 能够记录历史版本&#xff0c;回退历史版本团队开发&#xff0c;方便代码合并 2、版本管理工具介绍 svn、git svn是集中式版本控制…

音视频开发(一)ffmpeg 简单学习

前言 简单音视频处理。 学习自&#xff1a; 小破站FFmpeg最强教学丨入门FFmpeg看这一篇就够了丨从入门到放弃系列_哔哩哔哩_bilibili 01 下载、配置_哔哩哔哩_bilibili 基础知识 音视频处理基本都是&#xff1a;采样-处理得到帧队列-编码得到包队列-封装得到文件。 视频…

视频分辨率/帧率/码率选择参考

1. 视频码率与分辨率的参考表 1080&#xff0a;720的分辨率&#xff0c;用5000K左右&#xff1b; 720&#xff0a;576的分辨率&#xff0c;用3500K左右&#xff1b; 640&#xff0a;480的分辨率&#xff0c;用1500K左右。 2. 计算公式 基本算法&#xff1a;码率&#xff08;kb…

selenium 根据【关键词】获取知网文献信息

哈喽大家好&#xff0c;我是咸鱼 之前咸鱼写过几篇关于知网爬虫的文章&#xff0c;后台反响都很不错。虽然但是&#xff0c;咸鱼还是忍不住想诉苦一下 有些小伙伴文章甚至代码看都没看完&#xff0c;就问我 ”为什么只能爬这么多条文献信息&#xff1f;“&#xff08;看过代码…

SpringMVC 资源状态转移RESTful

文章目录 1、RESTful简介a>资源b>资源的表述c>状态转移 2、RESTful的实现HiddenHttpMethodFilterRESTful案例 1、RESTful简介 REST&#xff1a;Representational State Transfer&#xff0c;表现层资源状态转移。 a>资源 资源是一种看待服务器的方式&#xff0c…

【面试题08.06.汉诺塔问题】

目录 一、题目描述二、算法原理三、代码实现 一、题目描述 二、算法原理 三、代码实现 class Solution { public:void hanota(vector<int>& A, vector<int>& B, vector<int>& C) {int nA.size();_hanota(n,A,B,C);}void _hanota(int n,vector&l…

升级降级苹果手机iOS系统工具iMazing2024

像任何计算设备一样&#xff0c;iPhones和iPads偶尔也会出现问题。有时iOS会崩溃&#xff0c;你需要重新安装它&#xff0c;以确保你可以继续使用设备&#xff0c;而不会丢失任何数据。有时你会看到一个黑屏&#xff0c;你不能用你的设备做任何事情。有时iPhone或iPad会陷入循环…

VR酒店专业情景教学演示

VR酒店情景教学为学生带来的全新学习体验。在这个虚拟环境中&#xff0c;学生可以亲身经历各种酒店管理场景&#xff0c;从客房清洁、餐厅服务&#xff0c;到客人接待、突发事件处理&#xff0c;都能得到生动的模拟和实践。 客房清洁是酒店管理中最基础却也最重要的一环。通过V…

问题 R: 超级楼梯(递推,基础DP)查表

得到递推表达式&#xff1a; f(1)0&#xff0c;因为开始就站在第1级台阶上&#xff1b; f(2)1&#xff0c;只能从第1级台阶上1级&#xff1b; f(3)2&#xff0c;只能从第1级台阶上2级&#xff0c;或只能从第2级台阶上1级&#xff1b; f(n)f(n-2)f(n-1)&#xff0c;n>3 …

使用 Python 连接到 PostgreSQL 数据库

本文介绍了创建与 PostgreSQL 上的数据库的连接的过程。 我们需要安装 PostgreSQL 和创建数据库等先决条件&#xff0c;如下所述。 在系统中安装 PostgreSQL 顾名思义&#xff0c;PostgreSQL 是一款为高效管理数据库系统而创建的 SQL 系统软件。 在连接Python之前需要创建数据…

串行原理编程,中文编程工具中的串行构件,串行连接操作简单

串行通信原理编程&#xff0c;中文编程工具中的串行通信构件&#xff0c;串行通信连接设置简单 编程系统化课程总目录及明细&#xff0c;点击进入了解详情。https://blog.csdn.net/qq_29129627/article/details/134073098?spm1001.2014.3001.5502 串行端口 是串行的基础&#…

springboot的缓存和redis缓存,入门级别教程

一、springboot&#xff08;如果没有配置&#xff09;默认使用的是jvm缓存 1、Spring框架支持向应用程序透明地添加缓存。抽象的核心是将缓存应用于方法&#xff0c;从而根据缓存中可用的信息减少执行次数。缓存逻辑是透明地应用的&#xff0c;对调用者没有任何干扰。只要使用…

Python---break关键字对for...else结构的影响

for循环中添加else结构 循环可以和else配合使用&#xff0c; else下方缩进的代码指的是当循环正常结束之后要执行的代码。 强调&#xff1a; 循环 正常结束&#xff0c;else之后要执行的代码。 非正常结束&#xff0c;其else中的代码是不会执行的。&#xff08;如遇到br…