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 cli3 配置proxy代理無效的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法
這篇文章主要介紹了vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法,本文給大家推薦兩種方法，每種方法通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue實現(xiàn)圖片預(yù)覽效果實例（放大、縮小、拖拽）
現(xiàn)在項目中有這樣的一個需求,對上傳的圖片可以點擊之后在線預(yù)覽,這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)圖片預(yù)覽效果實例（放大、縮小、拖拽）的相關(guān)資料,需要的朋友可以參考下2021-05-05
vue 實現(xiàn)路由跳轉(zhuǎn)時更改頁面title
今天小編就為大家分享一篇vue 實現(xiàn)路由跳轉(zhuǎn)時更改頁面title，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue單頁面應(yīng)用中實現(xiàn)Markdown渲染
這篇文章主要介紹了Vue單頁面應(yīng)用中如何實現(xiàn)Markdown渲染，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了自定義Vue中的v-module雙向綁定的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了VUE3子表格嵌套分頁查詢互相干擾的問題解決方案,如果不需要做子表格的分頁查詢，那么可以直接在主表格中嵌套子表格，本文給大家介紹兩種方式，需要的朋友可以參考下2024-01-01
Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法
今天小編就為大家分享一篇Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue中ts無法識別引入的vue文件,提示找不到xxx.vue模塊的解決
這篇文章主要介紹了vue中ts無法識別引入的vue文件,提示找不到xxx.vue模塊的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇vue解決花括號數(shù)據(jù)綁定不成功的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10