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')