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