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

2019-12-02

<input id="articleId" value="1190000021172055" class="hidden">

vue官网的说明 ZI1C2Q3C1)U6HN%HQQNYA1A.png

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
    }
}

<button type="button" class="btn btn-primary follow-user sf_do" data-dotype="post" data-content="{"type":"state","state":false,"true":"\u5173\u6ce8\u4f5c\u8005","false":"\u6b63\u5728\u5173\u6ce8"}" data-api="/iteration/api/user/1030000017125528/follow">关注作者</button>

推荐阅读

Planets<map name="gridsMap" id="gridsMap"></map>

原文链接:segmentfault.com

上一篇:输入框模糊搜索
下一篇:React Hooks工程实践总结
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部