关于vue.js:vue-watch监听数组新旧值相同问题

1次阅读

共计 576 个字符，预计需要花费 2 分钟才能阅读完成。

场景

vue 应用 watch 监听数组变动时，更改数组但其 newVal 和 oldVal 总是雷同，无奈辨别数组中哪条数据是新增加的。

产生起因

Vue 官网得悉：由 watch 用法中提到，在变更 (不是替换) 对象或数组时，旧值将与新值雷同，因为它们的援用指向同一个对象 / 数组。Vue 不会保留变更之前值的正本。

罕用变更函数

数组：push、pop、shift、unshift、splice、reverse、sort

解决思路

将数组用一个根本数据类型的两头变量做过渡，先将数组转为为一般数据类型的变量，watch 就能够监听到两头变量的变动，最初再将一般数据变量转化为数组。很容易就想到数组与 string 之间的互相转换，这个转化过程就交给 vue 的 computed 计算解决。

实例代码

data: () {
    return{pullStreamList:[]
    }
},
computed:{pullStreamListWatch(){return JSON.parse(JSON.stringify(this.pullStreamList));
    }
},
watch:{
    pullStreamListWatch: {handler: function (value, oldValue) {console.log("newval", newval);
            console.log("oldval", oldval);
        },
    }
}