一文帶你搞懂Vue3中的各種ref的使用

更新時間：2023年08月16日 14:06:07 作者：web前端進階

在?Vue3?中，有許多與響應式相關的函數，例如?toRef、toRefs、isRef、unref?等等,本文將詳細介紹這些函數的用法，讓我們在實際開發(fā)中知道應該使用哪些?API?并能夠熟練地回答面試官的相關問題

在 Vue3 中，有許多與響應式相關的函數，例如 toRef、toRefs、isRef、unref 等等。合理地使用這些函數可以在實際開發(fā)中大大提高效率。本文將詳細介紹這些函數的用法，讓我們在實際開發(fā)中知道應該使用哪些 API 并能夠熟練地回答面試官的相關問題。

ref()

大家對于 ref 這個 API 肯定都不陌生。在 Vue3 中經常會用到它。它的作用是接收一個值并返回一個響應式的對象。我們可以通過.value 屬性來訪問和修改這個值。在模板中，我們可以省略.value，例如在下面的代碼中，當點擊按鈕時，頁面中的 count 會響應式地更改。

<template>
    <div>
        {{ count }}
        <button @click="addCount">+1</button>
    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
const count = ref(1)
const addCount = () => {
    count.value++
}
</script>

toRef

toRef 可以根據一個響應式對象中的一個屬性,創(chuàng)建一個響應式的 ref。同時這個 ref 和原對象中的屬性保持同步,改變原對象屬性的值這個 ref 會跟著改變,反之改變這個 ref 的值原對象屬性值也會改變,它接收兩個參數,一個是響應式對應,另一個則是屬性值,例如下面代碼

<template>
    <div>
        {{ count.a }}
        {{ a }}
        <button @click="addCount">+1</button>
    </div>
</template>
<script lang='ts' setup>
import { ref, toRef } from "vue"
const count = ref({
    a: 1,
    b: 2
})
const a = toRef(count.value, 'a')
const addCount = () => {
    a.value++
}
</script>

點擊按鈕的時候修改了 a 的值,此時 count 中的 a 也會跟著修改,當然這里的 count 也可以用 reactive

toRefs

toRefs 它可以將一個響應式對象轉成普通對象,而這個普通對象的每個屬性都是響應式的 ref

<template>
    <div>
        {{ count.a }}
        {{ countAsRefs.a }}
        <button @click="addCount">+1</button>
    </div>
</template>
<script lang='ts' setup>
import { reactive, toRefs } from "vue"
const count = reactive({
    a: 1,
    b: 2
})
const countAsRefs = toRefs(count)
const addCount = () => {
    countAsRefs.a.value++
}
</script>

此時代碼中的countAsRefs類型為

{
  a: Ref<number>,
  b: Ref<number>
}

它的屬性 a 和 b 都是響應式的 ref 對象,同樣的它們和原對象的 count 的屬性也是保持同步的

根據它的特性我們通常用它來解構一個響應式對象而不會讓其失去響應式

import { reactive, toRefs } from "vue";
const count = reactive({
  a: 1,
  b: 2,
});
const { a, b } = toRefs(count);

此時的 a 和 b 都是一個響應式的 ref 對象,并和原對象的 a 和 b 屬性保持同步

isRef()

isRef 顧名思義它是用來判斷某個值是否是 ref,注意:它判斷不了這個值是不是 reactive(可以使用 isReactive 判斷)

import { reactive, isRef, ref } from "vue";
const count = ref(1);
const testObj = reactive({
  a: 1,
});
console.log(isRef(count)); //true
console.log(isRef(testObj)); //false

unref()

其實它是一個語法糖

val = isRef(val) ? val.value : val;

如果是 ref 則返回它的內部值,否則則返回它本身。通過這個語法糖我們可以看出它可以對響應式對象解除響應式引用,比如我們只想獲取一個響應式的值,但不想要它的響應式可以使用它解除引用。例如

<template>
    <div>
        {{ unRefAsCount }}
        {{ count }}
        <button @click="addCount">+1</button>
    </div>
</template>
<script lang='ts' setup>
import { unref, ref } from "vue"
const count = ref(1)
let unRefAsCount = unref(count)
const addCount = () => {
    count.value++
}
</script>

代碼中的 unRefAsCount 是不具備響應式的

shallowRef

通過翻譯我們可以看出它是淺層的 ref,什么是淺層的 ref 呢? 與 ref 不同的是只有.value 是響應式的,再深層的屬性則不具備響應式

<template>
    <div>
        {{ shallowObj.a }}
        <button @click="addCount"> +1</button>
    </div>
</template>
<script lang='ts' setup>
import { shallowRef } from "vue"
const shallowObj = shallowRef({
    a: 1
})
const addCount = () => {
    //不會觸發(fā)頁面更新
    shallowObj.value.a++
}
</script>

但是如果我們將 addCount 改為修改整個.value 就會觸發(fā)響應式了

const addCount = () => {
  let temp = shallowObj.value.a;
  temp++;
  shallowObj.value = {
    a: temp,
  };
};

triggerRef

它可以讓淺層的 ref 即 shallowRef 深層屬性發(fā)生改變的時候強制觸發(fā)更改,比如上面觸發(fā)不了響應式的代碼示例加入triggerRef后

<template>
    <div>
        {{ shallowObj.a }}
        <button @click="addCount"> +1</button>
    </div>
</template>
<script lang='ts' setup>
import { shallowRef, triggerRef } from "vue"
const shallowObj = shallowRef({
    a: 1
})
const addCount = () => {
    shallowObj.value.a++
    //加入triggerRef強制觸發(fā)更改
    triggerRef(shallowObj)
}
</script>

此時再看頁面效果則觸發(fā)了響應式

customRef

顧名思義它是自定義的 ref,我們可以通過 customRef 來顯式的追蹤某個值的響應式變化,它接收一個函數,這個函數接受 track 和 trigger 兩個函數作為參數，并返回一個帶有 get 和 set 方法的對象。比如下面封裝一個自定義的響應式對象 myRef,同時控制它只有值小于 4 才會觸發(fā)響應式

<template>
    <div>
        {{ count }}
        <button @click="addCount"> +1</button>
    </div>
</template>
<script lang='ts' setup>
import { customRef } from "vue"
const myRef = (value: number) => {
    const customValue = customRef((track, trigger) => {
        return {
            get() {
                //通知vue需要追蹤后續(xù)內容的變化,這里可以自由控制
                track()
                return value
            },
            set(newValue) {
                console.log(newValue);//myRef.value=xxx的xxx值
                //加trigger則觸發(fā)響應式,通知vue更新頁面,這里可以自由控制是否加trigger
                if(value<4)  trigger()
                value = newValue
            }
        }
    })
    return customValue
}
const count = myRef(0)
const addCount = () => {
    count.value++
}
</script>

可以看到當 count 大于 4 的時候便失去了響應式

總結

本篇文章詳細介紹了 Vue3 中各種 ref 的用法,其中包括

ref(): 接收一個值并返回一個響應式的對象，可以使用.value 屬性來訪問和修改這個值。
toRef(obj, key): 根據一個響應式對象中的一個屬性，創(chuàng)建一個響應式的 ref，并且該 ref 和原對象中的屬性保持同步。
-toRefs(obj): 將一個響應式對象轉換成一個普通對象，其中普通對象的每個屬性都是響應式的 ref。
isRef(value): 判斷某個值是否是 ref 對象。
unref(value): 用于解除響應式引用
shallowRef(value): 創(chuàng)建一個淺層的 ref，只有 value 屬性是響應式的，深層的屬性不具備響應式。
triggerRef(ref): 強制淺層的 ref 發(fā)生改變時觸發(fā)響應式。
customRef(factory): 自定義 ref 對象，可以顯式地追蹤某個值的響應式變化。

到此這篇關于一文帶你搞懂Vue3中的各種ref的使用的文章就介紹到這了,更多相關Vue3 ref內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: