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 更新后执行
})
- 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会自动绑定到子组件的根元素上,你不需要在模板中显式地使用v−bind="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穿透不生效了 ,所以去掉继承会继续生效