vue3中ref

Ref

接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

类型

function ref<T>(value: T): Ref<UnwrapRef<T>>

interface Ref<T> {
  value: T
}

 

 

isRef() 

检查某个值是否为 ref

类型

function isRef<T>(r: Ref<T> | unknown): r is Ref<T>

const a:Ref<number | string>=ref(0)
const b=3
console.log(isRef(a))  //true
console.log(isRef(b))  //false

toRef() 

转换响应式对象中某个属性为单独响应式数据

类型 

function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K,
  defaultValue?: T[K]
): ToRef<T[K]>

type ToRef<T> = T extends Ref ? T : Ref<T>

const a=reactive({
    name:'111',
    age:3
})
const name=toRef(a,'name')
name.value='3333'   //会改变原来的响应式对象
console.log(a)
console.log(name)

 toRefs()

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。会改变原来对象的属性

类型

function toRefs<T extends object>(
  object: T
): {
  [K in keyof T]: ToRef<T[K]>
}

type ToRef = T extends Ref ? T : Ref<T>

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // ...基于状态的操作逻辑

  // 在返回时都转为 ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

shallowRef() 

ref() 的浅层作用形式

类型

function shallowRef<T>(value: T): ShallowRef<T>

interface ShallowRef<T> {
  value: T
}

const state = shallowRef({ count: 1 })

// 视图不会触发更改
state.value.count = 2

// 视图会触发更改
state.value = { count: 2 }

triggerRef() 

强制更新DOM

类型

function triggerRef(ref: ShallowRef): void

const b=shallowRef({name:'222'})

const change=()=>{
    b.value.name='555'
    triggerRef(b)    //视图会更新
    console.log(b)
}

customRef() 

创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。

customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。

类型

function customRef<T>(factory: CustomRefFactory<T>): Ref<T>

type CustomRefFactory<T> = (
  track: () => void,
  trigger: () => void
) => {
  get: () => T
  set: (value: T) => void
}