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>
點擊按鈕時會發現視圖同時也會更新。
解決問題
現在我們回到剛才的那個問題,說到triggerRefValue
與triggerRef
,那他們倆是什麼關系呢? 在觸發triggerRefValue
下面有段代碼。
就是triggerRef
函數,而這個函數裡面就一行代碼,就是triggerRefValue
函數,所以說triggerRef
的核心功能就是triggerRefValue
函數來做的,上面說到triggerRef
會強制觸發視圖更新,就等於是triggerRefValue
強制視圖更新啦。
以至於在點擊按鈕時修改ref
的值觸發瞭triggerRefValue
函數,間接影響到瞭shallowRef
的值,才會使視圖更新。
end
事情就是怎麼個事情,想要解決這個問題,隻能是在開發時避免這個這種寫法。
以上就是vue shallowRef作用及引發問題詳解的詳細內容,更多關於vue shallowRef作用的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- Vue3中的ref和reactive響應式原理解析
- vue3常用的API使用簡介
- 詳解Vue3中shallowRef和shallowReactive的使用
- Vue3常用的通訊方式總結與實例代碼
- 詳解Vue3中setup函數的使用教程