vue3數(shù)組或?qū)ο筚x值不更新解決方法示例
更新時間：2023年11月24日 10:16:00 作者：清兒
這篇文章主要為大家介紹了vue3數(shù)組或?qū)ο筚x值不更新解決方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
正文
vue3 使用proxy，對于對象和數(shù)組都不能直接整個賦。具體原因：reactive聲明的響應(yīng)式對象被 arr 代理，操作代理對象需要有代理對象的前綴，直接覆蓋會丟失響應(yīng)式。
數(shù)組賦值
// 方案1：創(chuàng)建一個響應(yīng)式對象，對象的屬性是數(shù)組
const state = reactive({
arr: []
});
state.arr = [1, 2, 3]
// 方案2: 使用 ref 函數(shù)
const state = ref([])
state.value = [1, 2, 3]
// 方案3: 使用數(shù)組的push方法
const arr = reactive([])
arr.push(...[1, 2, 3])對象賦值
let obj = reactive({
name: 'zhangsan',
age: '18'
})
obj = {
name: 'lisi'
age: ''
}
// 直接賦值檢測不到，因為響應(yīng)式的是它的屬性，而不是它自身
// 方法1: 單個賦值
obj['name'] = 'lisi';
obj['age'] = '';
// 方法2：創(chuàng)建響應(yīng)式對象
let obj = reactive({
data: {
name: 'zhangsan',
age: '18'
}
})
obj.data = {
name: 'lisi'
age: ''
}以上就是vue3數(shù)組或?qū)ο筚x值不更新解決方法示例的詳細內(nèi)容，更多關(guān)于vue3數(shù)組對象賦值更新的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue將el-table導(dǎo)出為excel文件的實現(xiàn)方法
在 Vue + Element UI 中,el-table 數(shù)據(jù)導(dǎo)出 Excel 文件,可以使用 xlsx（SheetJS）庫進行處理,以下是詳細的實現(xiàn)方法,包括安裝依賴、代碼示例和優(yōu)化建議,需要的朋友可以參考下2025-02-02
最近學習在vite項目中配置less,本文主要介紹了Vue3+Vite項目使用less的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2024-02-02
VUE + UEditor 單圖片跨域上傳功能的實現(xiàn)方法
這篇文章主要介紹了VUE + UEditor 單圖片跨域上傳功能的實現(xiàn)方法，需要的朋友參考下2018-02-02
如何使用VUE+faceApi.js實現(xiàn)攝像頭拍攝人臉識別
Face-api.js是一個JavaScript API,是基于tensorflow.js核心API 的人臉檢測和人臉識別的瀏覽器實現(xiàn),這篇文章主要給大家介紹了關(guān)于如何使用VUE+faceApi.js實現(xiàn)攝像頭拍攝人臉識別的相關(guān)資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue父子模版?zhèn)髦导敖M件傳值的三種方法,需要的朋友可以參考下2017-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端touch拖拽排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了VSCode插件安裝完成后的配置,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
本文主要介紹了Vue Router組件內(nèi)路由鉤子的使用,用于權(quán)限驗證、數(shù)據(jù)預(yù)加載、防止數(shù)據(jù)丟失等場景,具有一定的參考價值,感興趣的可以了解一下2025-06-06
最近在做一個前端vue.js對接的功能模塊時，需要實現(xiàn)一個下載圖片的功能，本文就介紹了vue.js根據(jù)圖片url進行圖片下載，感興趣的可以了解一下2021-06-06
vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁
這篇文章主要介紹了vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁 ,需要的朋友可以參考下2018-05-05