關(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue踩坑之backgroundImage路徑問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
當(dāng)一個(gè)頁面需要加載較多個(gè)組件時(shí),并且組件自身又比較復(fù)雜,如果一次性加載,可能等待時(shí)間較長,體驗(yàn)不好,這個(gè)時(shí)候就需要延遲加載了,本文為大家介紹了Vue2實(shí)現(xiàn)組件延遲加載的示例代碼,需要的可以參考下2024-01-01
vue中使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)
總結(jié)一下自己最近項(xiàng)目中用echarts動(dòng)態(tài)獲取接口數(shù)據(jù)并畫圖的方法,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-07-07
今天小編就為大家分享一篇vue 利用路由守衛(wèi)判斷是否登錄的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue2+elementui上傳照片方式(el-upload超簡單)
這篇文章主要介紹了vue2+elementui上傳照片方式(el-upload超簡單),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03![關(guān)于console.log打印結(jié)果是?[object?Object]的解決](http://img.jbzj.com/images/xgimg/bcimg5.png)
關(guān)于console.log打印結(jié)果是?[object?Object]的解決
這篇文章主要介紹了關(guān)于console.log打印結(jié)果是?[object?Object]的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
最近入職了新公司,接手了一個(gè)新拆分出來的Vue項(xiàng)目,針對該項(xiàng)目做了個(gè)打包優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中打包優(yōu)化的四種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue 路由切換時(shí)頁面內(nèi)容沒有重新加載的解決方法
今天小編就為大家分享一篇Vue 路由切換時(shí)頁面內(nèi)容沒有重新加載的解決方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案
這篇文章主要介紹了vue基于Element按鈕權(quán)限實(shí)現(xiàn)方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了Vue如何引入全局過濾器問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01