vue 3.0 ref 和 Reactive 數(shù)據(jù)響應(yīng)式，以及使用 Reactive 數(shù)據(jù)已更新但頁面沒有同步刷新異常
方案1：Vue 3.0 中我們使用 reactive() 定義的響應(yīng)式數(shù)據(jù)的時(shí)候，當(dāng)我們對象再次賦值，我們發(fā)現(xiàn)數(shù)據(jù)已經(jīng)修改成功，但是頁?并沒有自動(dòng)渲染成最新的數(shù)據(jù)；
這時(shí)我們可以改成 ref () 或者對 reactive() 綁定的數(shù)據(jù)類型下點(diǎn)功夫；
ref() 接受一個(gè)內(nèi)部值并返回一個(gè)響應(yīng)式且可變的 ref 對象。ref 對象僅有一個(gè) .value property，指向該內(nèi)部值
reactive() 主要時(shí)用來綁定一些復(fù)雜的數(shù)據(jù)類型，比如(對象、數(shù)組) ；它不可以綁定普通的數(shù)據(jù)類型，否則會報(bào)錯(cuò)；如果我們需要綁定普通的數(shù)據(jù)類型，建議使用上面的 ref()文章來源：http://www.zghlxwxcb.cn/news/detail-800151.html
方案2： 直接在視圖上使用v-if進(jìn)行處理
在修改值之后將元素銷毀,然后在修改后的下一次DOM渲染完成時(shí)再顯示出來,這樣就會觸發(fā)組件重新加載data的數(shù)據(jù)進(jìn)行渲染,data中被修改的數(shù)據(jù)才是最新的。文章來源地址http://www.zghlxwxcb.cn/news/detail-800151.html
方案3：使用vue的強(qiáng)制刷新處理
<script setup>
import { defineComponent , ref , computed , toRefs , getCurrentInstance} from 'vue'
const internalInstance = getCurrentInstance()
//操作數(shù)據(jù)后更新視圖
internalInstance.ctx.$forceUpdate()
}
</script>
到了這里，關(guān)于vue3中數(shù)據(jù)更新了，但是視圖沒有更新的5中方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
