vue3的ref全家桶---kalrry---ing

一、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'}
1
2
3
4
5

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 })
1
2
3
4
5
6
7
8
9
10

四、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);
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

六、isRef

用来判断一个数据是不是ref对象

const msg = ref({ num: '13' }) 
console.log(isRef(msg) //true

const msg = { num: '13' } 
console.log(isRef(msg) //false
//是返回true
//否返回false
1
2
3
4
5
6
7

七、ref与reactive

ref支持所有类型
reactive只支持object【array，object，map，set…】
ref取值赋值都需要加value，reactive不需要
reactive不能直接赋值，会破坏响应式对象从而导致页面不显示
解决方案
数组可以使用push加解构
教程

八、reactive与readonly

readonly是把reactive值变成一个只读的，使之没有办法赋值

教程

九，shallowReactive

相对于reactive来说shallowReactive是浅层响应式改变
问题和第【二】项说明相似