解決vue無法偵聽數(shù)組及對(duì)象屬性的變化問題
一、數(shù)組
1、可以監(jiān)聽到的情況
如push、splice、=賦值(array=[1,2,3])
2、無法監(jiān)聽到的情況
使用下標(biāo)修改某個(gè)元素(這種比較常見)
array[index] = 1
object.a = 3
直接修改數(shù)組length
array.length = 5
3、解決方案
this.$set(array, index, data) - 這是個(gè)深度的修改,某些情況下可能導(dǎo)致你不希望的結(jié)果,因此最好還是慎用this.dataArr = this.originArrthis.$set(this.dataArr, 0, {data: ’修改第一個(gè)元素’})console.log(this.dataArr) console.log(this.originArr) //同樣的 源數(shù)組也會(huì)被修改 在某些情況下會(huì)導(dǎo)致你不希望的結(jié)果
上面提到的splice方法進(jìn)行增刪改
利用臨時(shí)變量進(jìn)行中轉(zhuǎn)
let tempArr = [...this.targetArr]tempArr[0] = {data: ’test’}this.targetArr = tempArr
二、對(duì)象
對(duì)象和數(shù)組都是js里的引用類型,在實(shí)際存儲(chǔ)中,數(shù)據(jù)是存儲(chǔ)在堆中的,利用存儲(chǔ)在棧里的對(duì)象名或者數(shù)組名的指針進(jìn)行索引,因此也存在在淺拷貝和深拷貝以及等號(hào)賦值時(shí),到底是僅僅新建了一個(gè)指針指向了同一份數(shù)據(jù),還是兩個(gè)指針分別指向了兩份完全一樣的數(shù)據(jù)的問題
1、可以監(jiān)聽到的
對(duì)象的直接=賦值
this.obj = {name: ’test’}
2、無法監(jiān)聽到的
對(duì)象屬性的增刪改
obj: { prop1: ’data1’, prop2: ’data2’}...// 增this.obj.prop3 = ’data3’// 刪delete this.obj.prop1// 改this.obj.prop1 = ’data4’
3、解決辦法
this.$set(obj, key ,value) - 可實(shí)現(xiàn)增、改watch時(shí)添加deep:true深度監(jiān)聽,只能監(jiān)聽到屬性值的變化,新增、刪除屬性無法監(jiān)聽this.$watch(’blog’, this.getCatalog, { deep: true // immediate: true // 是否第一次觸發(fā) });watch時(shí)直接監(jiān)聽某個(gè)keywatch: { ’obj.name’(curVal, oldVal) { // TODO }}object.assign()+直接=賦值this.watchObj = Object.assign({}, this.watchObj, { name: ’xiaoyue’, age: 15,});
補(bǔ)充知識(shí):vue 監(jiān)聽不到數(shù)組或?qū)ο笾档淖兓趺崔k
一、vue監(jiān)聽數(shù)組的變化
vue能購(gòu)監(jiān)聽到數(shù)組變化的場(chǎng)景
通過賦值的形式改變正在被監(jiān)聽的數(shù)組;
通過splice(index, num, val) 的形式改變正在被監(jiān)聽的數(shù)組;
通過數(shù)組的push的形式改變正在被監(jiān)聽的數(shù)組。
vue無法監(jiān)聽數(shù)組變化的場(chǎng)景
通過數(shù)組索引改變數(shù)組元素的值;
改變數(shù)組的長(zhǎng)度;
vue無法監(jiān)聽數(shù)組變化的場(chǎng)景
this.$set(arr, index, newVal);
通過splice(index,num,val);
使用臨時(shí)變量作為中轉(zhuǎn),重新賦值數(shù)組;
二、vue監(jiān)聽對(duì)象的變化
vue能夠監(jiān)聽到對(duì)象變化的場(chǎng)景
通過直接賦值的場(chǎng)景。
eg:watchObj = {name:“zyk”}
vue無法監(jiān)聽到對(duì)象變化的場(chǎng)景
對(duì)象的增加、刪除、修改無法被vue監(jiān)聽到
vue解決無法監(jiān)聽對(duì)象變化的方法
使用 this.$set(object, key, value)(vue 無法監(jiān)聽 this.set 修改原有屬性)
使用Object.assign(),直接賦值的原理;(推薦使用)
以上這篇解決vue無法偵聽數(shù)組及對(duì)象屬性的變化問題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享2. .Net Core和RabbitMQ限制循環(huán)消費(fèi)的方法3. JSP之表單提交get和post的區(qū)別詳解及實(shí)例4. Xml簡(jiǎn)介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理5. 詳解瀏覽器的緩存機(jī)制6. jsp文件下載功能實(shí)現(xiàn)代碼7. 如何在jsp界面中插入圖片8. phpstudy apache開啟ssi使用詳解9. jsp實(shí)現(xiàn)登錄驗(yàn)證的過濾器10. vue3+ts+elementPLus實(shí)現(xiàn)v-preview指令
