vue3.5更新内容

vue3.5发布于2024.9.4

更新内容如下:

一、useId

每个模块都可以从vue中引入一个useId,这个useId自动递增 不会重复 感觉也没啥用

<script setup>
import { useId } from 'vue'const id = useId()
</script>
<template><form><label :for="id">Name:</label><input :id="id" type="text" /></form>
</template>

二、usetempleteRef()

背景:在3.5版本之前只能通过ref的形式关联dom,因为ref一般用于创建响应式数据,虽然规范上定义的时候会定义为xxRef进行语义化的区分,当还不是很妥当那样会产生很多歧义,所以在3.5版本正式推出新的定义方式usetempleteRef(),使用方式和原来的ref一致。注意要在onMounted之后才能获取带dom

<template><div class="about"><h1 ref="testdom">about</h1></div>
</template>
<script setup>
import { useTemplateRef,onMounted } from 'vue';
const hah = useTemplateRef('testdom')
onMounted(()=>{//如果没有在onMounted中打印,将打印出nullconsole.log(hah.value);
})
</script>

三、父子直接响应式

背景:在3.5之前的版本中如果在父组件中定义的属性,通过props传入子组件,在子组件进行了解构赋值,那么此时将失去响应式,需要通过toRefs重新将数据变成响应式,那样是很麻烦的,所以在3.5中进行了优化迭代,使得props传入的数据直接自带响应式

<template><h1 >{{ count }}</h1>
</template>
<script setup>
import {watchEffect} from 'vue'
const {count} = defineProps(['count'])
watchEffect(()=>{// 在vue3.5之前是监听不到数据的变化的// 在3.5中,如果父组件中修改了count的值,那么在子组件中可以监听到数据的变化console.log(count);
})
</script>

四、据说还更新了dom的渲染速度

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

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

相关文章

Docker 镜像导出与加载:从入门到精通

在容器化技术的世界中&#xff0c;Docker 镜像的导出与加载是开发与运维人员经常会用到的技能。本文将详细介绍如何导出 Docker 镜像为本地 tar 文件&#xff0c;并如何将其重新加载为 Docker 镜像&#xff0c;并分享一些操作中的小技巧与趣味总结。 一、Docker 镜像导出的秘…

HTTP 二、进阶

四、安全 1、TLS是什么 &#xff08;1&#xff09;为什么要有HTTPS ​ 简单的回答是“因为 HTTP 不安全”。由于 HTTP 天生“明文”的特点&#xff0c;整个传输过程完全透明&#xff0c;任何人都能够在链路中截获、修改或者伪造请求 / 响应报文&#xff0c;数据不具有可…

vue2踩坑记录:el-select如何绑定对象

页面上的下拉框&#xff1a; 选中人员之后&#xff0c;需要使用人员的其它信息做后续操作。所以不能只绑定用户Id&#xff0c;需要绑定整个item(用户对象)&#xff0c;这样每次change事件所获取到的newValue是整个对象&#xff0c;而且v-model中的变量指向的也是整个对象&#…

算法练习题10:leetcode76最小覆盖子串-滑动窗口

目录 题目 题目描述 约束条件 解决思路 代码 getOrDefault(c, 0) 方法 方法签名 参数 返回值 示例 getOrDefault 与 get 的主要区别 Integer 题目 题目描述 给定两个字符串 s 和 t&#xff0c;请你在字符串 s 中找到包含 t 中所有字符的最小子串。 要求&#xf…

十四、低空安全综合管理服务平台建设方案

1、系统背景 由于低空安全研究关系到国家战略安全保障,世界各国相继开展了相关法律法规建设,以及一系列的理论与技术保障研究。为了保障低空空域安全,需推动建立各省级安全管理平台,做好与企业级监控服务平台的管理衔接和数据共享,强化本区域内民用无人机的安全监管工作;…

Node.js中的SQLite库:安装、对比与选择指南

嘿&#xff0c;各位Node.js的江湖好汉们&#xff0c;今天咱们来聊聊如何在Node.js中安装SQLite库&#xff0c;并且来一场SQLite库的PK大战&#xff0c;看看哪个库才是你的“菜”&#xff01; 一、安装SQLite库&#xff1a;轻松加愉快 想要在Node.js中使用SQLite数据库&#x…

解决el-table中使用el-input无法聚焦问题

在el-table中点击单元格时使用el-input或其他表单组件编辑单条数据。会出现聚焦不上的问题&#xff0c;需要手动点击才能够聚焦。究其原因是因为点击单元格时页面已自动聚焦到单元格&#xff0c;此时无法自动聚焦到对应的表单&#xff0c;需要手动设置。 <template><e…

进来一起把【数据结构】的【栈与队列】狠狠玩弄,痛快到大汗淋漓

1前言&#xff1a;顾名思义&#xff0c;栈与队列是两个东西&#xff0c;栈和队列&#xff01;对的&#xff0c;栈和队列&#xff01;&#xff01;&#xff0c;没错&#xff0c;在念一遍&#xff0c;【栈】 和 【队列】&#xff01;&#xff01;&#xff01;但是本质都是差…

数字化转型工具有哪些 无锡振宁科技

数字化转型已经成为现代企业不可忽视的趋势。为了帮助企业在这个过程中取得成功&#xff0c;选择合适的工具至关重要。今天&#xff0c;无锡振宁科技想和大家聊聊一些在数字化转型中不可或缺的工具&#xff0c;以及它们具体能带来哪些优势和变化。 1. 云计算平台 云计算是数字…

Yapi部署文档

Yapi是高效、易用、功能强大的API管理平台&#xff0c;旨在为开发、产品、测试人员提供更优雅的接口管理服务 官网地址&#xff1a;Yapi 环境&#xff1a; l Git l NodeJs&#xff08;7.6&#xff09; l Mongodb&#xff08;2.6&#xff09; 1、 NodeJs的安装 获取资源 …

第十八章程序清单合集——Java语言程序设计基础篇

目录 程序清单18_1ComputeFactorial.java 程序清单18_2ComputeFibonacci.java 程序清单18_1ComputeFactorial.java package chapter_18;import java.util.Scanner;public class 程序清单18_1ComputeFactorial {public static void main(String[] args) {Scanner input new S…

webpack打包报错UglifyJs Unexpected token: punc (,)

项目当dev命令运行时能正常运行&#xff0c;打包后却报错UglifyJs Unexpected token: punc (,)&#xff0c; > yarn buildCreating an optimized production build... Failed to compile.Failed to minify the bundle. Error: static/js/main.js from UglifyJs Unexpected …

VBA学习(71):Excel VBA 访问带密码保护的Access数据库/用户窗体设置/EXCEL用户+密码登录界面(Access版)

前两天我们分享了一个用户密码登录EXCEL的案例【Excel VBA 用户窗体设置/一步一步代你设计EXCEL用户密码登录界面】&#xff0c;文中提及数据存储在Access中的情况&#xff0c;今天我就来把数据表&#xff08;tb用户&#xff09;移到Access中&#xff0c;修改一下代码&#xff…

cortex-m4系列绝对地址函数跳转问题

一、环境&#xff1a; cortex-m4&#xff0c;IAR&#xff0c;J-LINK。 二、问题&#xff1a; 1&#xff09;、首先&#xff0c; 我将另一个程序中的函数扣出来&#xff0c;通过j-flash-lite下载到MCU的一个固定地址Flash中。 2&#xff09;、然后&#xff0c; 声明一个变量为…

力扣刷题--821. 字符的最短距离【简单】

题目描述&#x1f357; 给你一个字符串 s 和一个字符 c &#xff0c;且 c 是 s 中出现过的字符。 返回一个整数数组 answer &#xff0c;其中 answer.length s.length 且 answer[i] 是 s 中从下标 i 到离它 最近 的字符 c 的 距离 。 两个下标 i 和 j 之间的 距离 为 abs(i…

Elastic Stack--ELFK实例与Dashboard界面

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 学习B站博主教程笔记&#xff1a; 最新版适合自学的ElasticStack全套视频&#xff08;Elk零基础入门到精通教程&#xff09;Linux运维必备—Elastic…

低代码技术:简化应用开发,推动数字化转型

在当今快速变化的技术环境中&#xff0c;企业面临着巨大的压力&#xff0c;需要快速响应市场需求并持续推动数字化转型。传统的应用开发方式往往复杂且耗时&#xff0c;开发周期长且需要大量的编程工作。为了应对这些挑战&#xff0c;低代码技术应运而生&#xff0c;为企业提供…

oracle startup失败,ORA-01078: failure in processing system parameters

SQL> startup ORA-01078: failure in processing system parameters LRM-00109: could not open parameter file /data/oracle/product/11.2.0/db_1/dbs/initorc1.ora 出错的原因可能是&#xff1a;文件名字不正确&#xff0c;文件权限不对&#xff0c;文件不存在&#x…

基于激光雷达的无人机相互避障

本框架是基于激光雷达的无人机群自主避障代码&#xff1a; 其主体框架利用ORCA算法&#xff0c;他是经典的多智能体相互避障算法&#xff0c;此版本只能规避动态障碍物&#xff0c;不能规避环境形成的静态障碍物我们对ORVA算法稍作修改&#xff0c;使其可以分布式部署&#xff…

嵌入式系统------ARM

目录 一.c语言回顾 1.特殊符号 &#xff08;1&#xff09;const &#xff08;2&#xff09;static &#xff08;3&#xff09;extern 2.内存的结构 &#xff08;1&#xff09;kernel&#xff1a;内核 &#xff08;2&#xff09;栈区 &#xff08;3&#xff09;堆区 &#xff08…