vue3 reactive定義的引用類型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式問(wèn)題
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)式，我們可以通過(guò)修改對(duì)象的屬性的形式，實(shí)現(xiàn)修改數(shù)據(jù)
vue3中reactive的理解
1.什么是reactive?
reactive是Vue3中提供實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)的方法.
在Vue2中響應(yīng)式數(shù)據(jù)是通過(guò)defineProperty來(lái)實(shí)現(xiàn)的.
而在Vue3響應(yīng)式數(shù)據(jù)是通過(guò)ES6的Proxy來(lái)實(shí)現(xiàn)的
2.reactive注意點(diǎn)
reactive參數(shù)必須是對(duì)象(json/arr)
如果給reactive傳遞了其他對(duì)象,默認(rèn)情況下修改對(duì)象,界面不會(huì)自動(dòng)更新,如果想更新,可以通過(guò)重新賦值的方式.
錯(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è)參考，也希望大家多多支持腳本之家。
- Vue3.0使用ref和reactive來(lái)創(chuàng)建響應(yīng)式數(shù)據(jù)
- Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的示例代碼
- Vue3 響應(yīng)式數(shù)據(jù) reactive使用方法
- Vue3關(guān)于響應(yīng)式數(shù)據(jù)類型詳解(ref、reactive、toRef、及toRefs)
- vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)(最新推薦)
- Vue 中 reactive創(chuàng)建對(duì)象類型響應(yīng)式數(shù)據(jù)的方法
相關(guān)文章
vue 在單頁(yè)面應(yīng)用里使用二級(jí)套嵌路由
這篇文章主要介紹了vue 在單頁(yè)面應(yīng)用里使用二級(jí)套嵌路由，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue 2.5 Level E 發(fā)布了： 新功能特性一覽
很高興Vue 2.5 Level E 發(fā)布了。在這篇文章中，我們將重點(diǎn)介紹一些更重要的的變化：更好的 TypeScript 集成，更好的錯(cuò)誤處理，更好地支持單文件組件中的函數(shù)式組件以及與環(huán)境無(wú)關(guān)的服務(wù)端渲染2017-10-10
vant如何實(shí)現(xiàn)Collapse折疊面板標(biāo)題自定義
這篇文章主要介紹了vant如何實(shí)現(xiàn)Collapse折疊面板標(biāo)題自定義，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能示例詳解
這篇文章主要介紹了vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-09-09
vue3簡(jiǎn)單封裝input組件和統(tǒng)一表單數(shù)據(jù)詳解
最近有一個(gè)需求是很多個(gè)表單添加,編輯等操作,會(huì)用到很多input輸入框,所以就想把input進(jìn)行簡(jiǎn)單封裝,這篇文章主要給大家介紹了關(guān)于vue3簡(jiǎn)單封裝input組件和統(tǒng)一表單數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-05-05
在最近一個(gè)項(xiàng)目的后臺(tái)管理系統(tǒng)中，寫前端界面時(shí)用到了ElementUI，但是發(fā)現(xiàn)導(dǎo)入數(shù)據(jù)表格之后表頭的高度一直很高，那么如何解決，本文就來(lái)詳細(xì)的介紹一下2021-09-09
mixins是一種分發(fā) Vue 組件中可復(fù)用功能的使用方式,它是一個(gè) js 對(duì)象,包含我們組件script中的任意功能選項(xiàng),下面就跟隨小編一起來(lái)看看它的具體使用吧2024-03-03
下面小編就為大家分享一篇對(duì)vue.js中this.$emit的深入理解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程詳解
這篇文章主要介紹了Vue實(shí)現(xiàn)電梯樣式錨點(diǎn)導(dǎo)航效果流程，這種導(dǎo)航效果廣泛應(yīng)用于商城點(diǎn)餐購(gòu)物情景，文中通過(guò)示例代碼介紹的很詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-05-05
C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)
下面小編就為大家分享一篇C#實(shí)現(xiàn)將一個(gè)字符轉(zhuǎn)換為整數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12