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