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值不更新解決方法示例的詳細(xì)內(nèi)容，更多關(guān)于vue3數(shù)組對象賦值更新的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Vue腳手架的簡單使用實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
探索Vue.js component內(nèi)容實現(xiàn)
這篇文章主要和大家一起探索Vue.js component內(nèi)容實現(xiàn),具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
詳解利用 Vue.js 實現(xiàn)前后端分離的RBAC角色權(quán)限管理
本篇文章主要介紹了利用 Vue.js 實現(xiàn)前后端分離的RBAC角色權(quán)限管理，非常具有實用價值，需要的朋友可以參考下2017-09-09
今天小編就為大家分享一篇解決VUE雙向綁定失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue實現(xiàn)動態(tài)查詢規(guī)則生成組件
今天我們來給大家介紹下在Vue開發(fā)中我們經(jīng)常會碰到的一種需求場景，本文主要介紹了Vue動態(tài)查詢規(guī)則生成組件，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了vue配置別名alias在webstorm不生效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Unocss(原子化css)?使用及vue3?+?vite?+?ts講解
這篇文章主要介紹了Unocss(原子化css)使用vue3?+?vite?+?ts的方法,簡單介紹了Unocss使用及圖標(biāo)庫使用，通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue獲取DOM元素并修改屬性或者樣式，文中通過兩種方法給大家介紹了vue 如何獲取并操作DOM元素,需要的朋友可以參考下2022-10-10
這篇文章主要給大家介紹了vue如何使用socket與服務(wù)端進行通信的相關(guān)資料,在Vue中我們可以將Websocket類封裝成一個Vue插件,以便全局使用,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue實現(xiàn)todolist刪除功能,，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06