在vue中對(duì)數(shù)組值變化的監(jiān)聽(tīng)與重新響應(yīng)渲染操作
在我們項(xiàng)目開(kāi)發(fā)過(guò)程中，實(shí)例中的數(shù)據(jù)類(lèi)型可以是對(duì)象、數(shù)組等。在對(duì)象中，某個(gè)屬性值發(fā)生更改時(shí)，我們可以通過(guò)對(duì)象的深度監(jiān)聽(tīng)，以達(dá)到重新渲染頁(yè)面的需求?；蛘?a target="_blank" href="http://chabaoo.cn/article/190994.htm">查閱這篇文章
例如：
<script>
export default {
data(){
return {
objVal: {
name: 'obj',
type: 'obj'
}
}
},
watch:{
objVal:{
handler(val,oldval){
},
deep: true,
}
},
methods:{
changeObj(){
this.objVal.name = 'newobj';
}
}
}
</script>
但是，在使用同一種方式進(jìn)行數(shù)組值更改監(jiān)聽(tīng)時(shí)，這種做法是無(wú)效的。
<script>
export default {
data() {
return {
arrList: [1,2,3,4,5]
};
},
watch: {
arrList: {
handler(val, oldval) {
},
deep: true
}
},
methods: {
changeArr() {
// 無(wú)效
this.arrList[0] = 10;
}
}
};
</script>
上述用以監(jiān)聽(tīng)數(shù)組值變化的方法是無(wú)效的，vue是不會(huì)響應(yīng)數(shù)據(jù)變化而重新去渲染頁(yè)面。在vue中僅需要通過(guò)修改賦值語(yǔ)句的方式，即可讓vue響應(yīng)數(shù)組數(shù)據(jù)的變化。具體操作如下：
使用方法：
// Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
具體使用案例：
<script>
export default {
data() {
return {
arrList: [1,2,3,4,5]
};
},
methods: {
changeArr() {
// this.arrList[0] = 10;
// 修改為：
this.arrList.splice(0, 1, 10);
}
}
};
</script>
或：
<script>
export default {
data() {
return {
arrList: [1,2,3,4,5]
};
},
methods: {
changeArr() {
// this.arrList[0] = 10;
// 修改為：
this.$set(this.arrList, 0, 10);
}
}
};
</script>
以上兩種方式，均可達(dá)到監(jiān)聽(tīng)數(shù)組值變化的效果。
補(bǔ)充知識(shí)：vue數(shù)組操作不觸發(fā)前端重新渲染
暫時(shí)使用給數(shù)組先賦值 [ ] ,然后重新賦值的方式解決。
此外，能夠監(jiān)聽(tīng)的數(shù)組變異方法
https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95
還有就是set
相關(guān)文章
這篇文章主要介紹了vue this.reload 方法 配置，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
最近在研究uni-app跨端開(kāi)發(fā)APP和H5的通訊和交互,比如H5調(diào)用APP的方法,APP往H5里面?zhèn)鲄?H5往app外面?zhèn)鲄?這篇文章主要給大家介紹了關(guān)于uniapp?webview和H5通信的3種方式,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了詳解基于Vue，Nginx的前后端不分離部署教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
vue實(shí)現(xiàn)頁(yè)面打印自動(dòng)分頁(yè)的兩種方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面打印自動(dòng)分頁(yè)的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
對(duì)于插槽的概念和使用,這是vue的一個(gè)難點(diǎn),這需要我們靜下心來(lái),慢慢研究,下面這篇文章主要給大家介紹了關(guān)于vue默認(rèn)插槽的相關(guān)資料,需要的朋友可以參考下2021-11-11
詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
這篇文章主要介紹了三種方式解決vue中v-html元素中標(biāo)簽樣式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue插件vue-resource的使用筆記（小結(jié)）
本篇文章主要介紹了vue插件vue-resource的使用筆記（小結(jié)），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
自定義elementui上傳文件以及攜帶參數(shù)問(wèn)題
這篇文章主要介紹了自定義elementui上傳文件以及攜帶參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-08-08
如何利用vue展示.docx文件、excel文件和csv文件內(nèi)容
最近遇到了一些新的需求,需要前端實(shí)現(xiàn)文件預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于如何利用vue展示.docx文件、excel文件和csv文件內(nèi)容的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04