shallowRef是什么

最近在開發(fā)遇到一個(gè)問題，使用shallowRef居然導(dǎo)致視圖更新了，這一看把我也給搞懵了，后來便仔細(xì)看了看文檔，現(xiàn)在來總結(jié)一下。

ref是一個(gè)定義響應(yīng)式的API,可以通過訪問.value屬性修改并更新到視圖上。

但是shallowRef并不會(huì)被深層遞歸成響應(yīng)式，也就是說使用.value.屬性是不會(huì)更新到試圖上的。只能是替換整個(gè).value才會(huì)更新。

那么我們現(xiàn)在遇到的問題是怎么樣導(dǎo)致的呢？

發(fā)現(xiàn)問題

通過我去注釋代碼，最后只剩下幾行代碼，通過一個(gè)小例子來看看： 比如：

<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>

現(xiàn)在是這樣的，當(dāng)我們點(diǎn)擊按鈕時(shí)，打印出shallowValue的會(huì)發(fā)現(xiàn)更新啦，但是視圖并未更新。

再定義一個(gè)ref值。同樣在點(diǎn)擊按鈕觸發(fā)的函數(shù)里面改變ref的值。會(huì)發(fā)現(xiàn)不僅是ref的值更新啦，shallowRef的值也更新啦。

這是怎么回事呢？

我們?cè)跒g覽debug一下，發(fā)現(xiàn)執(zhí)行refValue.value觸發(fā)set函數(shù)時(shí)同時(shí)一會(huì)觸發(fā)triggerRefValue函數(shù)。

那triggerRefValue函數(shù)又是什么東東？

triggerRefValue與triggerRef

說到triggerRefValue就可以提到triggerRef(), triggerRef()會(huì)強(qiáng)制觸發(fā)依賴于一個(gè)shallowRef，同時(shí)會(huì)更新視圖.

<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>

點(diǎn)擊按鈕時(shí)會(huì)發(fā)現(xiàn)視圖同時(shí)也會(huì)更新。

解決問題

現(xiàn)在我們回到剛才的那個(gè)問題，說到triggerRefValue與triggerRef,那他們倆是什么關(guān)系呢？ 在觸發(fā)triggerRefValue下面有段代碼。

就是triggerRef函數(shù)，而這個(gè)函數(shù)里面就一行代碼，就是triggerRefValue函數(shù)，所以說triggerRef的核心功能就是triggerRefValue函數(shù)來做的，上面說到triggerRef會(huì)強(qiáng)制觸發(fā)視圖更新，就等于是triggerRefValue強(qiáng)制視圖更新啦。

以至于在點(diǎn)擊按鈕時(shí)修改ref的值觸發(fā)了triggerRefValue函數(shù)，間接影響到了shallowRef的值，才會(huì)使視圖更新。

end

事情就是怎么個(gè)事情，想要解決這個(gè)問題，只能是在開發(fā)時(shí)避免這個(gè)這種寫法。

以上就是vue shallowRef作用及引發(fā)問題詳解的詳細(xì)內(nèi)容，更多關(guān)于vue shallowRef作用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！