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