vue3的ref全家桶& reactive---kalrry
一、ref
vue2中常用ref来操作dom
二、ref与shallowRef
在vue3里面用ref包裹的数据才有响应式
在vue2里面是data包裹的数据才有响应式
1. ref是深层响应式
2. shallowRef是浅层响应式
3. ref与shallowRef不能同时使用,ref会影响shallowRef,造成视图更新混乱
4. ref更改在xxx.value.name='new'
5. shallowRef更改在xxx.value={ name:'new'}
ref响应式原理其实就是收集依赖和触发依赖更新
三、ref与Ref
两个在ts中定义数据类型的方式有区别
import { ref, reactive } from 'vue';
import type { Ref } from 'vue'
type Msg = {
num: number
}
const msg0 = ref({ num: '13' }) //在不定义的情况向会进行类型自动推倒
const msg1 = ref<Msg>({ num: 13 })
const msg2: Ref<Msg> = ref({ num: 13 })
四、shallowRef与triggerRef
如果shallowRef使用ref的更新方式,用triggerRef包裹会强制更新shallowRef,起到和ref相同的作用
五、customRef
customRef自定义ref,相当于自己去实现一个ref响应式
function MyRef<T>(value: T) {
return customRef((track, trigger) => {
get(){
track()
return
},
set(newVal){
//这里因为点击会一直出发,我们添加个防抖
clearTimeout(timer)
timer = setTimeout(() => {
value = newVal
trigger()
timer = null
}, 500);
}
})
}
六、isRef
用来判断一个数据是不是ref对象
const msg = ref({ num: '13' })
console.log(isRef(msg) //true
const msg = { num: '13' }
console.log(isRef(msg) //false
//是返回true
//否返回false
七、ref与reactive
ref支持所有类型
reactive只支持object【array,object,map,set…】
ref取值赋值都需要加value,reactive不需要
reactive不能直接赋值,会破坏响应式对象从而导致页面不显示
解决方案
数组可以使用push加解构
教程
八、reactive与readonly
readonly是把reactive值变成一个只读的,使之没有办法赋值
九,shallowReactive
相对于reactive来说shallowReactive是浅层响应式改变
问题和第【二】项说明相似