Vue3 中 watch 语法对于数组和对象监听的小问题
作者：互联网
监听数组，需要使用 watch(() => [...arr], (newValue,oldValue) => { ... }) 的方式
添加和删除数据可以正常获得newValue,oldValue的值
对于数组中数据的修改，如果是一维简单数组，可以正常获得newValue,oldValue的值
查看代码
const app = Vue.createApp({
setup() {
const arr = Vue.reactive([
1,2,3
])
Vue.watch(() => arr, (newValue,oldValue) => {
console.log(newValue, oldValue);
console.log('arr changed')
})
return {
arr
}
},
methods: {
arrPush() {
this.arr.push(1)
},
arrChange(){
this.arr[0]++
},
arrSplice(){
this.arr.splice(0,1)
}
}
})
app.mount('#app')对于对象数组，需要添加 {deep:true} 参数才能正常监听，并且得到的newValue,oldValue的值是一样的
查看代码
const app = Vue.createApp({
setup() {
const arr = Vue.reactive([
{
name: '张三',
age: 18
},
{
name: '李四',
age: 20
},
{
name: '王五',
age: 22
}
])
Vue.watch(() => [...arr], (newValue, oldValue) => {
console.log(newValue, oldValue);
console.log('arr changed')
}, { deep: true })
return {
arr
}
},
methods: {
arrPush() {
this.arr.push({
name: '赵六',
age: 23
})
},
arrChange() {
this.arr[0].age++
},
arrSplice() {
this.arr.splice(0, 1)
}
}
})
app.mount('#app')
对象可以直接使用watch监听，可惜得到的newValue,oldValue的值仍然是一样的
查看代码
const app = Vue.createApp({
setup() {
const arr = Vue.reactive({
name: '张三',
age: 18
})
Vue.watch(arr, (newValue,oldValue) => {
console.log(newValue,oldValue);
console.log('arr changed')
})
return {
arr
}
},
methods: {
arrPush() {
this.arr.id = 1
},
arrChange(){
this.arr.age++
},
arrSplice(){
delete this.arr.id
}
}
})
app.mount('#app')
标签：arr,Vue,app,watch,newValue,age,oldValue,Vue3,监听 来源： https://www.cnblogs.com/Bin-x/p/16358007.html