ref

接受一個內(nèi)部值并返回一個響應(yīng)式且可變的 ref 對象。ref 對象僅有一個 .value 屬性，指向該內(nèi)部值途事。
使用時需要 .value,在模板中不用

const count = ref(0)
console.log(count.value)  // 0

count.value++
console.log(count.value)  // 1

unref

如果傳入的時一個 ref 對象布卡，則返回其內(nèi)部的 value 值,否則返回自身。
本質(zhì)時val = isRef(val) ? val.value : val的語法糖

const count = ref(0)
const a = 1
console.log(count)            // {value: 0}
console.log(unref(count))     // 0
console.log(unref(a))         // 1

toRef

傳入一個響應(yīng)式對象和一個該對象上的屬性卧惜，對這個屬性使用 ref()厘灼，并且使其仍然與源響應(yīng)式對象保持響應(yīng)連接夹纫。

const obj = reactive({
    a: 1,
    b: 10
})
const a1 = toRef(obj, 'a')  // a1.value = 1
a1.value++       // a1.value = 2, obj.a = 2
obj.a++          // a1.value = 3, obj.a = 3

toRefs

傳入一個響應(yīng)式對象，將其轉(zhuǎn)換成普通對象设凹，并對其每一個屬性都使用 ref()捷凄，并且使其仍然與源響應(yīng)式對象保持響應(yīng)式連接。

const obj = reactive({
    a: 1,
    b: 10
})
const obj1 = toRefs(obj)    // obj1.a.value = 1, obj1.b.value = 10
obj.a++             // obj.a = 2, obj1.a.value = 2
obj1.a.value++      // obj1.a.value = 3, obj.a = 3

isRef

const count = ref(0)    // isRef(count) = > true
const a = 1             // isRef(a) = > false

customRef

customRef 函數(shù)可以自定義一個 ref围来，顯示地控制其依賴追蹤與更新觸發(fā)響應(yīng)跺涤；

• 自定義一個函數(shù)，并且 return customRef((track, trigger))
• track 用來追蹤依賴监透，trigger 觸發(fā)更新響應(yīng)
• customRef 函數(shù)返回一個 get 和 set
• get 中顯示調(diào)用 track 進行依賴追蹤
• 調(diào)用 set 中修改數(shù)據(jù)桶错，觸發(fā) trigger 更新視圖
  使用 customRef 自定義一個防抖函數(shù)

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg">
</template>

<script setup>
import { customRef } from 'vue'
function useDebouncedRef(value, time = 1000) {
  let timer
  return customRef((track, trigger) => {
    return {
      get() {
        track()         // 收集依賴
        return value
      },
      set(newValue) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          value = newValue
          trigger()     // 更新視圖
        }, time)
      }
    }
  })
}
const msg =  useDebouncedRef('0')
</script>

1s 內(nèi)

1s 后