vue3 reactive定義的引用類型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式問題
reactive定義的引用類型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式
<script setup>
import {reactive,onMounted} from 'vue'
const userMenu=reactive([])
onMounted(()=>{
userMenu=[1,2,3]
})
</script>
<template>
<div>示例：{{userMenu}}</div>
</template>
<style>
</style>如上代碼，我們定義了一個(gè)userMenu的reactive數(shù)組，我們?cè)趏nMounted生命周期直接給userMenu重新賦值為【1,2,3】，但是我們打開頁(yè)面顯示的仍然是之前的空數(shù)組
這是因?yàn)?，reactive定義的數(shù)組或者對(duì)象，不能直接賦值修改，否則定義的數(shù)據(jù)userMenu將失去響應(yīng)性。
我們可以按照如下代碼：
<script setup>
import {reactive,onMounted} from 'vue'
const userMenu=reactive({
arr:[]
})
onMounted(()=>{
userMenu.arr=[1,2,3]
})
</script>
<template>
<div>示例：{{userMenu.arr}}</div>
</template>
<style>
</style>將空數(shù)組作為對(duì)象的一個(gè)屬性，我們直接修改arr屬性為【1,2,3】，此時(shí)userMenu不會(huì)失去響應(yīng)性，頁(yè)面內(nèi)容也就跟著變化成【1,2,3】
注意：
vue3中reactive定義的引用類型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式，我們可以通過修改對(duì)象的屬性的形式，實(shí)現(xiàn)修改數(shù)據(jù)
vue3中reactive的理解
1.什么是reactive?
reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法.
在Vue2中響應(yīng)式數(shù)據(jù)是通過defineProperty來實(shí)現(xiàn)的.
而在Vue3響應(yīng)式數(shù)據(jù)是通過ES6的Proxy來實(shí)現(xiàn)的
2.reactive注意點(diǎn)
reactive參數(shù)必須是對(duì)象(json/arr)
如果給reactive傳遞了其他對(duì)象,默認(rèn)情況下修改對(duì)象,界面不會(huì)自動(dòng)更新,如果想更新,可以通過重新賦值的方式.
錯(cuò)誤示范
當(dāng)傳遞的是非對(duì)象時(shí),頁(yè)面不會(huì)發(fā)生響應(yīng)
正確實(shí)例
arr正確實(shí)例
傳入數(shù)組會(huì)轉(zhuǎn)成proxy對(duì)象
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決vue生產(chǎn)環(huán)境,頁(yè)面卡死的問題
這篇文章主要介紹了解決vue生產(chǎn)環(huán)境,頁(yè)面卡死的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue3中正確使用ElementPlus的示例代碼,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
在Vue?3中,插槽（slot）是一種強(qiáng)大的內(nèi)容分發(fā)API,它允許組件的模板開發(fā)者定義一種插槽,下面就跟隨小編一起來學(xué)習(xí)一下它的具體使用吧2024-11-11
vue+elementUI中el-radio設(shè)置默認(rèn)值方式
這篇文章主要介紹了vue+elementUI中el-radio設(shè)置默認(rèn)值方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
使用Vue做一個(gè)簡(jiǎn)單的todo應(yīng)用的三種方式的示例代碼
這篇文章主要介紹了使用Vue做一個(gè)簡(jiǎn)單的todo應(yīng)用的三種方式的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
vue中利用pinyin-pro純前端實(shí)現(xiàn)拼音的模糊搜索功能
這篇文章主要介紹了vue中利用pinyin-pro純前端實(shí)現(xiàn)拼音的模糊搜索,實(shí)現(xiàn)思路很簡(jiǎn)單，通過安裝配置插件編寫工具類，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue?v-if未生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue利用computer解決單項(xiàng)數(shù)據(jù)流的問題詳解
Vue 是一個(gè)非常流行和強(qiáng)大的前端框架，它讓我們可以用簡(jiǎn)潔和優(yōu)雅的方式來構(gòu)建用戶界面，今天我們來分享一個(gè) Vue 中非常經(jīng)典的問題，也是一個(gè)非常實(shí)用的技巧，希望對(duì)大家有所幫助2023-07-07
vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載的實(shí)現(xiàn)方法
這篇文章主要介紹了vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載,iview是全局注入，基本使用原先的類名進(jìn)行二次創(chuàng)建公共組件，修改基礎(chǔ)js實(shí)現(xiàn)邏輯，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-08-08
Vue3?TypeScript?實(shí)現(xiàn)useRequest詳情
本文介紹了Vue3?TypeScript實(shí)現(xiàn)useRequest詳情，useRequest可能是目前社區(qū)中最強(qiáng)大，最接地氣的請(qǐng)求類?Hooks了。可以覆蓋99%的網(wǎng)絡(luò)請(qǐng)求場(chǎng)景，無論是讀還是寫，無論是普通請(qǐng)求還是分頁(yè)請(qǐng)求，無論是緩存還是防抖節(jié)流，通通都能支持，關(guān)于其介紹需要的小伙伴可以參考一下2022-05-05