快捷導(dǎo)航

vue3 reactive定義的引用類型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式問題

更新時間：2023年06月06日 11:29:45 作者：禿頭小寶貝@

這篇文章主要介紹了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傳遞了其他對象,默認(rèn)情況下修改對象,界面不會自動更新,如果想更新,可以通過重新賦值的方式.

錯誤示范

當(dāng)傳遞的是非對象時,頁面不會發(fā)生響應(yīng)

正確實例

arr正確實例

傳入數(shù)組會轉(zhuǎn)成proxy對象

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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