vue2转vue3一些属性使用方法总结 (持续更新中)

1.vue3中不再需要用this.$set 方法

在 Vue 3 中,this. s e t 方法不再存在,因为 V u e 3 使用了 P r o x y 来实现其响应式系统,使得对象的属性访问和修改都能够被自动追踪。因此,在 V u e 3 中,你通常不需要使用特殊的方法来添加响应式属性。在 V u e 2 中,你可能会使用 t h i s . set 方法不再存在,因为 Vue 3 使用了 Proxy 来实现其响应式系统,使得对象的属性访问和修改都能够被自动追踪。因此,在 Vue 3 中,你通常不需要使用特殊的方法来添加响应式属性。 在 Vue 2 中,你可能会使用 this. set方法不再存在,因为Vue3使用了Proxy来实现其响应式系统,使得对象的属性访问和修改都能够被自动追踪。因此,在Vue3中,你通常不需要使用特殊的方法来添加响应式属性。在Vue2中,你可能会使用this.set 来确保向一个已经创建的数组或对象添加的新属性是响应式的。但在 Vue 3 中,当你使用
ref 或 reactive 创建的响应式对象或数组时,任何新添加的属性默认都是响应式的。

2.vue3定义数组 并接口赋值

定义数组 并赋值
const items = ref([]);
const myObject = reactive({});const response = await axios.get('your-api-endpoint');
items.value = response.data; // 假设接口返回的是数组格式数据

3.watch侦听对象中的具体属性

watch 的基本用法

watch() 默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数

第一个参数:侦听源,侦听源可以是一下几种

一个函数,返回一个值一个 ref一个响应式对象(reactive)或是由以上类型的值组成的数组
第二个参数:侦听源发生变化时要触发的回调函数。

​ (newValue, oldValue) => { /* code */}

​ 当侦听多个来源时,回调函数接受两个数组,分别对应源数组中的新值和旧值

​ ( [ newValue1, newValue2 ] , [ oldValue1 , oldValue2 ]) => {/* code
*/}

第三个参数:可选对象,可以支持一下这些选项

immediate:侦听器创建时立即触发回调
deep:如果源是一个对象,会强制深度遍历,以便在深层级发生变化时触发回调函数
flush:调整回调函数的刷新时机onTrack / onTrigger:调试侦听器的依赖

const obj = reactive({ count: 0 })
// 错误,因为 watch() 中的侦听源是一个 number,最终 source 返回的 getter 函数是一个空,所以就得不到侦听的数据
watch(obj.count, (count) => {console.log(`count is: ${count}`)
})
// 正确,主要思想是,将侦听源转化为以上4种类型(转化为getter函数是最简单方便的)
watch(() => obj.count,(count) => {console.log(`count is: ${count}`)},{immediate: true, // 立即执行回调deep: true,      // 深度观察flush: 'pre'     // 在DOM更新之前调用回调} //第三个参数的使用方法
)

4.过滤方法
const statusFilter = (status: number) => {
const filter: any = { 0: ‘danger’, 1: ‘success’, 50: ‘danger’ }
return filter[status]
}

5.vue2中this.$nextTick() 方法在vue3中使用如下:

import  {nextTick} from 'vue'
nextTick(()=>{
// 这个回调将在 DOM 更新后执行
})
  1. vue3中使用的 v-bind=‘$attrs’ 踩坑

在 Vue 3 中,v-bind=“$attrs” 的用法与 Vue 2 中相同,它用于将父组件中未被子组件识别(即未定义为
props)的属性绑定到子组件的根元素上。这样做可以确保父组件传递的额外属性(如 class、style 等)能够被应用到子组件上。
$attrs是一个对象,包含了父组件中不被认为是props的属性,这些属性可以是事件监听器(v-on),或者其他的DOM attribute。

注意1,inheritAttrs: false 的使用是可选的,

这取决于你是否希望 $attrs 自动绑定到子组件的根元素上。如果你希望手动控制这些属性的绑定,你可以设置 inheritAttrs 为 false,并在 setup 函数中返回你想要绑定的属性。
如果你不使用 inheritAttrs: false,则 a t t r s 会自动绑定到子组件的根元素上,你不需要在模板中显式地使用 v − b i n d = " attrs 会自动绑定到子组件的根元素上,你不需要在模板中显式地使用 v-bind=" attrs会自动绑定到子组件的根元素上,你不需要在模板中显式地使用vbind="attrs"。
如果你需要处理 $attrs 中的类名和样式,你可能需要手动合并它们,因为 Vue 不会自动合并这些属性。这通常可以通过使用工具函数如 classNames 或 mergeStyles 来实现。

注意2, 在vue3中 我们经常定义对象的类型时,会有继承类型的使用

 如: interface ProTableProps extends Partial<Omit<TableProps<any>, 'data'>>{  //****此处省略}//ProTableProps继承extends Partial<Omit<TableProps<any>, 'data'>>后,v-bind=$attrs穿透不生效了 ,所以去掉继承会继续生效

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

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

相关文章

chrome google浏览器添加插件扩展失败怎么办,无法从该网站添加应用、扩展程序和用户脚本确定,

无法从该网站添加应用、扩展程序和用户脚本确定 chrome google浏览器添加插件扩展失败怎么办&#xff0c;无法从该网站添加应用、扩展程序和用户脚本确定&#xff0c; 需要打开调试模式 chrome://extensions/

【Vue】Vue3父子组件相互调用示例

目录 1. 父调子示例1.1 父组件1.2 子组件 2. 子调父示例2.1 父组件2.2 子组件 Tips&#xff1a;使用场景情况有很多&#xff0c;通常常见于页面表单赋值&#xff0c;表单属性页面回显。 页面给弹窗dialog表单赋值&#xff0c;通常情况为父传子&#xff1b;而表单提交后回传给页…

第32篇:实时时钟

Q&#xff1a;本期我们使用BCD计数器设计实现分--秒--厘秒实时时钟。 A&#xff1a;实时时钟设计&#xff1a;在2个七段数码管上显示分钟&#xff08;从0到59&#xff09;&#xff0c;在2个七段数码管显示秒&#xff08;从0到59&#xff09;&#xff0c;在2个七段数码管上显示…

要不要那么卷啊?前端是不是死了?

最近在找前端工作。发现好多还要求至少会一个后端的语言php或者java。这个我理解毕竟要和后端对接要求懂点也是可以的。但是最近发现还要会设计&#xff0c;有设计感可以自己设计。what&#xff1f;这我都会了。工资总是要多一点吧&#xff1f;结果工作经验3-5年竟然9k-12k。离…

信息工程大学第五届超越杯程序设计竞赛(同步赛)vp

目录 A.遗失的旋律 C.财政大臣 D.实验室有多少人 E.在雾中寻宁静 F.不规则的轮回 G.完美数字 M.Monikas game A.遗失的旋律 思路&#xff1a;模拟即可 代码如下&#xff1a; #include<bits/stdc.h>using namespace std; #define fs first #define sc second #de…

中国平安八度蝉联Brand Finance全球保险品牌价值第一,品牌价值持续增长4.2%

近日&#xff0c;国际知名品牌价值评级机构Brand Finance发布《2024年全球保险品牌价值100强》&#xff0c;中国平安连续第八年蝉联全球第一&#xff0c;品牌价值高达336亿美元&#xff0c;较上年增长4.2%。榜单其余前五位依次为德国安联保险、中国人寿、法国安盛保险、中国太平…

JavaScript的事件对象

event 对象包含“与创建它的事件有关的”属性和方法。触发的事件类型不一样&#xff0c;可用的属性和方法不一样。 1.什么是事件对象 官方解释&#xff1a;event 对象代表事件的状态&#xff0c;比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。简单理解&#xff1a;事件发…

目标检测——RCNN系列学习(一)

前置知识 包括&#xff1a;非极大值抑制&#xff08;NMS&#xff09;、selective search等 RCNN [1311.2524] Rich feature hierarchies for accurate object detection and semantic segmentation (arxiv.org)https://arxiv.org/abs/1311.2524 1.网络训练 2.推理流程 3.总…

leetcode/2024.4.8/双指针简单题(1)

给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入: nums [0] 输出: […

Vant使用自定义图标(阿里图标)

前言 阿里图标官网 备用地址&#xff1a; https://www.iconfont.cn/ 添加图标 1、进入官网添加图标&#xff0c;如箭头所示 2、复制如图选中的文件&#xff0c;粘贴项目中的src/assets/icon_font/目录下 3、在main.js引入图标css //引入自定义图标 import /assets/icon_fon…

基于springboot教师人事档案管理系统,2024年最新基于web的毕业设计题目代码

管理员 教师端 目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 研究现状 2 1.3 研究意义 3 第2章 相关技术 4 2.1 系统开发平台 5 2.2 平台开发相关技术 6 第3章 系统分析 7 3.1 系统目标 8 3.2系统流程和逻辑 9 第4章系统概要设计 10 4…

Vue常见简写 “:“ , “@“ , “#“

一、 : 是什么&#xff1f; 1. : 是什么意思? 示例&#xff1a;:data"tableData" 其中这个 : 其实是v-bind的简写形式,实际开发中非常常见,所以首先先来说一下这个 : 的意义和使用. 首先需要了解一下v-bind,v-bind指令指示Vue将元素的id属性与组件的tabalData属…

Linux虚拟主机中如何进行扫描检查恶意软件

看到论坛中有网友留言想要知道Linux虚拟主机上是否有扫描检测工具可以检测病毒文件或者恶意软件的。因为想要知道是否有此功能&#xff0c;以便他后去购买产品是可以更清晰的去咨询以及了解。正如这边是有使用Hostease提供商的Linux 虚拟主机&#xff0c;而cPanel中如何进行扫描…

012——LED模块驱动开发(基于I.MX6uLL)

目录 一、 硬件原理图 二、 驱动程序 三、 应用程序 四、 Makefile 五、操作 一、 硬件原理图 又是非常经典的点灯环节 &#xff0c;每次学新语言第一步都是hello world&#xff0c;拿到新板子或者学习新的操作系统&#xff0c;第一步就是点灯。 LED 的驱动方式&#xff0…

2024年阿里云优惠券(代金券)在哪里领取?

阿里云作为国内领先的云计算服务提供商&#xff0c;不仅提供了稳定、高效的云服务&#xff0c;还时常推出各种优惠活动&#xff0c;以此来吸引用户上云。其中&#xff0c;阿里云优惠券就是一种常见的优惠方式。那么&#xff0c;在2024年&#xff0c;我们该如何领取阿里云优惠券…

[开源] 基于GRU的时间序列预测模型python代码

基于GRU的时间序列预测模型python代码分享给大家&#xff0c;记得点赞哦 #!/usr/bin/env python # coding: utf-8import time time_start time.time() import numpy as np import matplotlib.pyplot as plt import pandas as pd import math from keras.models import Sequent…

Python第四次作业

周六&#xff1a; 1. 找出10000以内能被5或6整除&#xff0c;但不能被两者同时整除的数&#xff08;函数&#xff09; def find_number():for number in range(0,10000):if number % 5 0 or number % 6 0:if number % 5 ! number % 6:ls.append(number)print(ls)ls [] fin…

Git Flow困境逃脱指南

本来来自极狐GitLab 资源中心&#xff0c;原文链接&#xff1a;https://resources.gitlab.cn/articles/020183ba-cfc0-4917-b901-248acdcfc92f。 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff…

面板数据回归模型(二)房价的影响因素分析

1.数据来源 本文选择我国出一线城市房价均值、新一线城市房价均值、二线城市房价均值、货币供应量和利率。选取2002-2018年的数据,共17组数据,由于数据的自然对数变换不改变原有的协整关系,并能使其趋势线性化,消除时间序列中存在的异方差现象,所以对所有数据取其自然对数…

Java多线程+分治求和,太牛了

shigen坚持更新文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 个人IP&#xff1a;shigen 最近的一个面试&#xff0c;shigen简直被吊打&#xff0c;简历上写了熟悉高并发…