watch深度监听数组_关于watch监听数组的问题
注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。这样是可以监听到的mounted() {this.$service.enableInvoiceOrders(this.$route.params.orderType).then(res => {console.log(res)if (res.code == 0)
注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。
这样是可以监听到的
mounted() {
this.$service.enableInvoiceOrders(this.$route.params.orderType).then(res => {
console.log(res)
if (res.code == 0) {
// watch监听数组先处理初始值 再赋值 最后再监听
//我的理解也就是会监听两次一次判断是否数组 一次赋值是否变异
res.data.records.forEach(item => {
item.isSelectItem = false
})
this.orderArr = res.data.records
// 相当于变异了
// this.orderArr.forEach(item => {
// item.isSelectItem = false
// })
}
})
},
watch: {
orderArr: {
deep: true,
handler(val, oldVal) {
console.log(val, '==数据==')
this.ischeckAll = val.every(item => {
return item.isSelectItem
})
}
}
}
这样监听不到
mounted() {
this.$service.enableInvoiceOrders(this.$route.params.orderType).then(res => {
console.log(res)
if (res.code == 0) {
this.orderArr = res.data.records
// 相当于变异了
this.orderArr.forEach(item => {
item.isSelectItem = false
})
}
})
},
watch: {
orderArr: {
deep: true,
handler(val, oldVal) {
console.log(val, '==数据==')
this.ischeckAll = val.every(item => {
return item.isSelectItem
})
}
}
}
关于深度监听 如果数组不深度监听 相当于只监听一个数组的地址
注意:最好不要监听数组或者对象 这样内存消耗比较大
更多推荐
所有评论(0)