当前位置：首页 > news >正文

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

news 来源：原创 2024/5/16 23:03:46

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

在 Vue 3 中，this. $se t 方法不再存在，因为 V u e 3 使用了 P ro x y 来实现其响应式系统，使得对象的属性访问和修改都能够被自动追踪。因此，在 V u e 3 中，你通常不需要使用特殊的方法来添加响应式属性。在 V u e 2 中，你可能会使用 t hi s .$ 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 更新后执行
})

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 tt rs 会自动绑定到子组件的根元素上，你不需要在模板中显式地使用 v - bin d = "$ 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穿透不生效了 ，所以去掉继承会继续生效