關(guān)于Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法
更新時(shí)間：2021年09月30日 11:56:00 作者：奧特曼
本文主要介紹了Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一、vue監(jiān)聽數(shù)組
vue實(shí)際上可以監(jiān)聽數(shù)組變化，比如
data () {
return {
watchArr: [],
};
},
watchArr (newVal) {
console.log('監(jiān)聽：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr = [1, 2, 3];
}, 1000);
},
在比如使用splice(0,2,3)從數(shù)組下標(biāo)0刪除兩個(gè)元素，并在下標(biāo)0插入一個(gè)元素3
data () {
return {
watchArr: [1, 2, 3],
};
},
watchArr (newVal) {
console.log('監(jiān)聽：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr.splice(0, 2, 3);
}, 1000);
},
push數(shù)組也能夠監(jiān)聽到。
二、vue無法監(jiān)聽數(shù)組變化的情況
但是數(shù)組在下面兩種情況下無法監(jiān)聽
- 利用索引直接設(shè)置數(shù)組項(xiàng)時(shí)，例如arr[indexofitem]=newValue
- 修改數(shù)組的長度時(shí)，例如arr.length=newLength
舉例無法監(jiān)聽數(shù)組變化的情況
1、利用索引直接修改數(shù)組值
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('監(jiān)聽：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr[0].name = 'xiaoyue';
}, 1000);
},
2、修改數(shù)組的長度
- 長度大于原數(shù)組就將后續(xù)元素設(shè)置為undefined
- 長度小于原數(shù)組就將多余元素截掉
data () {
return {
watchArr: [{
name: 'krry',
}],
};
},
watchArr (newVal) {
console.log('監(jiān)聽：' + newVal);
},
created () {
setTimeout(() => {
this.watchArr.length = 5;
}, 1000);
},
到此這篇關(guān)于關(guān)于Vue不能監(jiān)聽(watch)數(shù)組變化的文章就介紹到這了,更多相關(guān)Vue不能監(jiān)聽數(shù)組變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
在使用Vue過渡動(dòng)畫時(shí),注意選擇器優(yōu)先級(jí),謹(jǐn)慎合并樣式,Vue2中關(guān)于顯示隱藏的類名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來定義動(dòng)畫的持續(xù)時(shí)間和樣式,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要介紹了vue如何自定義按鈕單選和多選問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue使用Multiavatarjs生成自定義隨機(jī)頭像的案例
這篇文章給大家介紹了Vue項(xiàng)目中使用Multiavatarjs生成自定義隨機(jī)頭像的案例,文中通過代碼示例介紹的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10
Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享
這篇文章主要介紹了Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享，文章圍繞Vue?Vuex的相關(guān)資料展開配置項(xiàng)和多組件數(shù)據(jù)共享的案例分享，需要的小伙伴可以參考一下2022-04-04
關(guān)于vue打包時(shí)的publicPath就是打包后靜態(tài)資源的路徑問題
這篇文章主要介紹了vue打包時(shí)的publicPath，就是打包后靜態(tài)資源的路徑,本文通過三種情況分析給大家詳細(xì)介紹，需要的朋友可以參考下2022-07-07
vue實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)學(xué)生信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Vue.js是一個(gè)流行的前端框架,以其易于學(xué)習(xí)和使用而聞名,在Vue3中,借助于Composition API和新的setup語法糖,模板和渲染函數(shù)的使用變得更加靈活和強(qiáng)大,在這篇博客中,我們將深入探討Vue3是如何處理模板和渲染函數(shù)的,并通過示例代碼來展示如何有效利用這些功能2024-11-11
Vite?vue3多頁面入口打包以及部署踩坑實(shí)戰(zhàn)
因?yàn)槲覀児镜捻?xiàng)目是多頁面應(yīng)用,不同于傳統(tǒng)單頁面應(yīng)用,一個(gè)包就可以了,下面這篇文章主要給大家介紹了關(guān)于Vite?vue3多頁面入口打包以及部署踩坑的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue使用原生swiper代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02