在vue中對數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作
更新時間：2020年07月17日 10:11:42 作者：_cris
這篇文章主要介紹了在vue中對數(shù)組值變化的監(jiān)聽與重新響應(yīng)渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在我們項目開發(fā)過程中，實例中的數(shù)據(jù)類型可以是對象、數(shù)組等。在對象中，某個屬性值發(fā)生更改時，我們可以通過對象的深度監(jiān)聽，以達到重新渲染頁面的需求?；蛘?a target="_blank" href="http://m.fzitv.net/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>
但是，在使用同一種方式進行數(shù)組值更改監(jiān)聽時，這種做法是無效的。
<script>
export default {
data() {
return {
arrList: [1,2,3,4,5]
};
},
watch: {
arrList: {
handler(val, oldval) {
},
deep: true
}
},
methods: {
changeArr() {
// 無效
this.arrList[0] = 10;
}
}
};
</script>
上述用以監(jiān)聽數(shù)組值變化的方法是無效的，vue是不會響應(yīng)數(shù)據(jù)變化而重新去渲染頁面。在vue中僅需要通過修改賦值語句的方式，即可讓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>
以上兩種方式，均可達到監(jiān)聽數(shù)組值變化的效果。
補充知識：vue數(shù)組操作不觸發(fā)前端重新渲染
暫時使用給數(shù)組先賦值 [ ] ,然后重新賦值的方式解決。
此外，能夠監(jiān)聽的數(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?ECharts實現(xiàn)機艙座位選擇展示功能代碼詳解
這篇文章主要介紹了Vue?ECharts實現(xiàn)機艙座位選擇展示,本文給大家分享一段簡短的代碼通過效果圖展示給大家介紹的非常明白，需要的朋友可以參考下2022-05-05
Vue3?+?elementplus實現(xiàn)表單驗證+上傳圖片+?防止表單重復(fù)提交功能
這篇文章主要介紹了Vue3?+?elementplus?表單驗證+上傳圖片+?防止表單重復(fù)提交,本文給大家展示效果圖和完整代碼，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Electron + vue 打包桌面操作流程,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細介紹了Vue3.2中setup語法糖的具體使用方法，文中的示例代碼講解詳細，對我們深入了解Vue有一定的幫助，需要的可以參考一下2023-05-05
原生JS?Intersection?Observer?API實現(xiàn)懶加載
這篇文章主要為大家介紹了原生JS?Intersection?Observer?API實現(xiàn)懶加載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了vue2從template到render模板編譯入口詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
在理解淺拷貝和深拷貝淺前，必須先理解基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別，這篇文章主要介紹了Vue淺拷貝和深拷貝實現(xiàn)方案及區(qū)別對比分析,需要的朋友可以參考下2023-03-03
vite+ts vite.config.ts使用path報錯問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報錯問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
下面小編就為大家?guī)硪黄獪\談mint-ui loadmore組件注意的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Vue移動端下拉刷新組件的使用教程，每一次我在使用vant組件庫里面list組件和下拉刷新連在一起用的時候都會出現(xiàn)下拉刷新和列表下滑局部滾動的沖突，這就很難受，這篇文章將解決它2023-04-04