vue shallowRef作用及引發問題詳解

shallowRef是什麼

最近在開發遇到一個問題,使用shallowRef居然導致視圖更新瞭,這一看把我也給搞懵瞭,後來便仔細看瞭看文檔,現在來總結一下。

ref是一個定義響應式的API,可以通過訪問.value屬性修改並更新到視圖上。

但是shallowRef並不會被深層遞歸成響應式,也就是說使用.value.屬性是不會更新到試圖上的。隻能是替換整個.value才會更新。

那麼我們現在遇到的問題是怎麼樣導致的呢?

發現問題

通過我去註釋代碼,最後隻剩下幾行代碼,通過一個小例子來看看: 比如:

<script setup>
import {  shallowRef } from 'vue'
let shallowValue = shallowRef({
    age: 10
})
const change = () => {
    shallowValue.value.age= 20;
    console.log(shallowValue.value) // {age:20}
}
</script>
<template>
    <h1>{{ shallowValue }}</h1>
    <button @click="change">change shallowRef</button>
</template>

現在是這樣的,當我們點擊按鈕時,打印出shallowValue的會發現更新啦,但是視圖並未更新。

再定義一個ref值。同樣在點擊按鈕觸發的函數裡面改變ref的值。會發現不僅是ref的值更新啦,shallowRef的值也更新啦。

這是怎麼回事呢?

我們在瀏覽debug一下,發現執行refValue.value觸發set函數時同時一會觸發triggerRefValue函數。

triggerRefValue函數又是什麼東東?

triggerRefValue與triggerRef

說到triggerRefValue就可以提到triggerRef(), triggerRef()會強制觸發依賴於一個shallowRef,同時會更新視圖.

<script setup>
import { shallowRef,triggerRef } from 'vue'
let refValue = ref("ref舊值")
let shallowValue = shallowRef({
    age: 10
})
const change = () => {
    shallowValue.value.age= 20;
    triggerRef(shallowValue)
    // refValue.value = 'ref的新值'
    console.log(shallowValue.value)
}
</script>
<template>
    <h1>ref的值:{{refValue}}</h1>
    <h1>{{ shallowValue }}</h1>
    <button @click="change">change shallowRef</button>
</template>

點擊按鈕時會發現視圖同時也會更新。

解決問題

現在我們回到剛才的那個問題,說到triggerRefValuetriggerRef,那他們倆是什麼關系呢? 在觸發triggerRefValue下面有段代碼。

就是triggerRef函數,而這個函數裡面就一行代碼,就是triggerRefValue函數,所以說triggerRef的核心功能就是triggerRefValue函數來做的,上面說到triggerRef會強制觸發視圖更新,就等於是triggerRefValue強制視圖更新啦。

以至於在點擊按鈕時修改ref的值觸發瞭triggerRefValue函數,間接影響到瞭shallowRef的值,才會使視圖更新。

end

事情就是怎麼個事情,想要解決這個問題,隻能是在開發時避免這個這種寫法。

以上就是vue shallowRef作用及引發問題詳解的詳細內容,更多關於vue shallowRef作用的資料請關註WalkonNet其它相關文章!

推薦閱讀: