Vue3.4的新变化

解析器

3.4版本解析器速度提升2倍,提高了 SFC 构建性能。
之前版本Vue 使用递归下降解析器,该解析器依赖于许多正则表达式和前瞻搜索。新的解析器使用基于htmlparser2中的标记生成器的状态机标记生成器,它仅迭代整个模板字符串一次。

响应式上

3.4 还对响应式系统进行了重大重构,目标是提高计算属性的重新计算效率。

const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)watchEffect(() => console.log(isEven.value)) // logs truecount.value = 2 // logs true again
  1. 之前版本的watchEffect每次count.value更改都会触发回调,即使计算结果保持不变。通过 3.4 后的优化,现在仅当计算结果实际发生更改时才会触发回调。
  2. 多个计算的依赖 dep 更改仅触发同步效果一次。
  3. Array shift, unshift,splice方法仅触发一次同步效果。

defineModel

defineModel是一个新的

//  1.声明一个modelValue的属性,消费父组件v-model绑定的值
const model = defineModel()
// 可以携带options
const model = defineModel({ type: String })// 现在直接修改值.value即可,相当于调用了emits "update:modelValue" 
model.value = 'hello'// 声明父组件绑定的v-model:count='xxx'
const count = defineModel('count')
// 2。定义type和默认值
const count = defineModel('count', { type: Number, default: 0 })
// 3.如果我们想获取v-model添加的修饰符,子组件中可以解构出来,第二个参数就是修饰符
const [modelValue, modelModifiers] = defineModel()
// 父组件v-model.trim='xxxx' 子组件eg:  modelModifiers.trim//4.当存在修饰符时,我们可能需要在读取或将其同步回父元素时对其值进行转换。我们可以通过使用get和set转换器选项来实现这一点:
const [modelValue, modelModifiers] = defineModel({// get() 可以省略set(value) {// 如果trim修饰符存在就将值去掉作用空格返回同步回父组件if (modelModifiers.trim) {return value.trim()}return value}
})

v-bind同名缩写

const id = ref('23213')
const name = ref('name')
<Test :id :name>

主要的更新就是以上这些了~

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

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

相关文章

3190个文件!10GB大小!看3D WEB轻量引擎HOOPS Communicator如何高性能读取?

前言&#xff1a; HOOPS Communicator是专为在云端和Web上构建工程应用程序的3D开发工具包。它针对Web工作流、浏览器和工程图形进行了优化。研发小组花了20多年的时间来研发HOOPS Visualize&#xff08;本地3D可视化引擎&#xff09;&#xff0c;他们在这些工作中积累了大量计…

CyberLink的视频编辑软件PowerDirector Ultimate 2024 22.0版本在win系统下载与安装配置

目录 前言一、PowerDirector Ultimate安装二、使用配置总结 前言 PowerDirector Ultimate是由CyberLink公司开发的一款视频编辑软件&#xff0c;其为高级版本&#xff0c;拥有多种强大的视频编辑和效果功能。该软件具有许多强大的功能和工具&#xff0c;包括多轨时间线编辑、视…

竞赛保研 基于机器视觉的车道线检测

文章目录 1 前言2 先上成果3 车道线4 问题抽象(建立模型)5 帧掩码(Frame Mask)6 车道检测的图像预处理7 图像阈值化8 霍夫线变换9 实现车道检测9.1 帧掩码创建9.2 图像预处理9.2.1 图像阈值化9.2.2 霍夫线变换 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分…

apisix shell批量更新upstream routes

修改所有的上游配置http改为https&#xff08;host port修改参考注释&#xff09; #!/bin/bash# 获取原始数据 response$(curl -s -H "X-API-KEY: xxx" http://127.0.0.1:9180/apisix/admin/upstreams)# 修改host和port # modified_response$(echo $response | jq …

代码随想录算法训练营第五十八天|739. 每日温度、496.下一个更大元素I

代码随想录 (programmercarl.com) 739. 每日温度 栈里面存放的是元素的下标&#xff0c;确保栈里面的下标对应的元素是单调递增的。 如果栈里面存放的是元素的话&#xff0c;就没有办法定位到下标值&#xff0c;无法计算出距离&#xff0c;所以直接就存入下标。 class Solut…

param_validator 常用校验器的实现

目录 一、前置说明1、总体目录2、相关回顾3、本节目标 二、操作步骤1、项目目录2、代码实现3、测试代码4、日志输出 三、后置说明1、要点小结2、下节准备 一、前置说明 1、总体目录 《 pyparamvalidate 参数校验器&#xff0c;从编码到发布全过程》 2、相关回顾 param_vali…

【数据采集与预处理】数据接入工具Kafka

目录 一、Kafka简介 &#xff08;一&#xff09;消息队列 &#xff08;二&#xff09;什么是Kafka 二、Kafka架构 三、Kafka工作流程分析 &#xff08;一&#xff09;Kafka核心组成 &#xff08;二&#xff09;写入流程 &#xff08;三&#xff09;Zookeeper 存储结构 …

竞赛保研 基于机器视觉的银行卡识别系统 - opencv python

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的银行卡识别算法设计 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng…

Mybatis动态SQL注解开发操作数据库

通过Mybatis的动态注解开发&#xff0c;只需要在映射文件中使用注解来配置映射关系&#xff0c;从而无需编写XML映射文件。常用的注解有Select&#xff0c;Update&#xff0c;Insert&#xff0c;Delete等&#xff0c;它们分别用于配置查询&#xff0c;更新&#xff0c;插入和删…

Linux系统安全

作为一种开放源代码的操作系统&#xff0c;linux服务器以其安全、高效和稳定的显著优势而得以广泛应用。 账号安全控制 用户账号是计算机使用者的身份凭证或标识&#xff0c;每个要访问系统资源的人&#xff0c;必须凭借其用户账号 才能进入计算机.在Linux系统中&#xff0c;提…

MIGO向成本中心发料,从成本中心收货

向成本中心发料&#xff0c;首先在MM03查看物料是否有库存&#xff0c;物料的计价标准和产成品的计价标准价是否同一种&#xff0c;S价或者V价 首先&#xff0c;“会计1”视图&#xff0c;查看物料库存 “成本2”视图查看标准成本发布 1、MIGO发货&#xff0c;选&#xff1a;A…

Solid Converter 10.1(PDF转换器)软件安装包下载及安装教程

Solid Converter 10.1下载链接&#xff1a;https://docs.qq.com/doc/DUkdMbXRpZ255dXFT 1、选中下载好的安装包右键解压到【Solid Converter 10.1.11102.4312】文件夹。 2、选中"solidconverter"右键以管理员身份运行 3、选择”自定义安装”&#xff0c;勾选”我已阅…

MySql 1170-BLOB/TEXT 错误

MySql 1170-BLOB/TEXT column idused in key specification without a key length 原因&#xff1a;由于将主键id设置为 text类型&#xff0c;所以导致主键 的长度&#xff0c;没有设置。 解决方案&#xff1a;方案1&#xff1a;将主键id设置为varchar 类型的,设置对应的长度…

如何通过Python将各种数据写入到Excel工作表

在数据处理和报告生成等工作中&#xff0c;Excel表格是一种常见且广泛使用的工具。然而&#xff0c;手动将大量数据输入到Excel表格中既费时又容易出错。为了提高效率并减少错误&#xff0c;使用Python编程语言来自动化数据写入Excel表格是一个明智的选择。Python作为一种简单易…

揭秘人工智能:探索智慧未来

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、网络奇遇记 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 什么是人工智能?二. 人工智能的关键技术2.1 机器学习2.2 深度学习2.1 计算机…

《系统架构设计师教程(第2版)》第3章-信息系统基础知识-05-专家系统(ES)

文章目录 1. 先了解人工智能2.1 人工智能的特点2.2 人工智能的主要分支2. ES概述2.1 概述2.2 和一般系统的区别1)第一遍说了5点(理解为主)2)第二遍说的3点(主要记这个)3. ES的特点4. ES的组成4.1 知识库4.2 综合数据库4.3 推理机4.4 知识获取模块4.5 解释程序4.6 人一机接…

linux泡妞大法之Nginx网站服务

技能目标 学会 Nginx 网站服务的基本构建 了解 Nginx 访问控制实现的方法 掌握 Nginx 部署虚拟主机的方法 学会 LNMP 架构部署及应用的方法 在各种网站服务器软件中&#xff0c;除了 Apache HTTP Server 外&#xff0c;还有一款轻量级…

授权策略(authorize方法)

authorize方法&#xff08;授权策略的使用示例&#xff09; $this->authorize(destroy, $status) 要实现这个功能&#xff0c;你需要执行以下步骤&#xff1a; 1、创建一个授权策略&#xff1a; 在Laravel中&#xff0c;授权策略是用于定义用户对特定操作的权限的类。你可…

我是一片骂声中成长起来的专家,RocketMQ消息中间件实战派上下册!!

曾几何&#xff0c;我的技术真的很烂&#xff0c;烂到技术主管每次都是点名要Review我的业务代码。 曾几何&#xff0c;我对技术沉淀没有一点自我意识&#xff0c;总是觉得临时抱一下佛脚就可以了。 曾几何&#xff0c;我也觉得技术无用&#xff0c;看看那些业务领导&#xf…

每日一道算法题day-two(备战蓝桥杯)

今天带来的题目是&#xff1a; 填充 有一个长度为 n的 0101 串&#xff0c;其中有一些位置标记为 ?&#xff0c;这些位置上可以任意填充 0 或者 1&#xff0c;请问如何填充这些位置使得这个 0101 串中出现互不重叠的 00 和 11 子串最多&#xff0c;输出子串个数。 输入格式…