Vue中使用watch监听对象/数组导致的新旧值相同

vue官网的说明

data(){
    return {
        processSteps: {
            type: 'form',
            data: [
                {
                    name: 'xiaoming',
                    age: 18
                },{
                    name: 'xiaohong',
                    age: 18
                }
            ]
        },
        list: []
    }
}
//计算属性实现的监听也不是深度监听
computed: {
    //processSteps为实例中实际用到的一个对象, 此处借助另一个变量newProcessSteps来完成监听后的处理操作
    newProcessSetps(){
        return JSON.parse(JSON.stringify(this.processSteps)))
    },
    //数组(只要有返回新数组就可以)
    newList(){
        return [...this.list]    //...展开运算符返回一个新数组
    }
},
watch: {
    newProcessSteps:{
        handler(newVal, oldVal){
            console.log(newVal, oldVal)
            //比较newVal和olcVal
            ...
            ...
        },
        deep: true
    }
}
[![](https://img.javascriptcn.com/cd2f4e9fca632acecba66f2d62851fae) ](/u/justforsmiling)

关注作者

推荐阅读
![Planets](https://img.javascriptcn.com/ec4c0b29ebada45d4779dea2344c4c70.png)
原文链接:segmentfault.com

上一篇:输入框模糊搜索
下一篇:React Hooks工程实践总结

相关推荐

官方社区

扫码加入 JavaScript 社区