场景
vue使用watch监听数组变化时，更改数组但其newVal和oldVal总是相同，无法区分数组中哪条数据是新添加的。
产生原因
Vue官方得知：由watch用法中提到，在变更 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。
解决思路
【vue watch监听数组新旧值相同问题】将数组用一个基本数据类型的中间变量做过渡，先将数组转为为普通数据类型的变量，watch就可以监听到中间变量的变化，最后再将普通数据变量转化为数组。很容易就想到数组与string之间的相互转换，这个转化过程就交给vue的computed计算处理。
实例代码
data: () {
return{
pullStreamList:[]
}
},
computed:{
pullStreamListWatch(){
return JSON.parse(JSON.stringify(this.pullStreamList));
}
},
watch:{
pullStreamListWatch: {
handler: function (value, oldValue) {
let obj = JSON.parse(value);
let obj2 = JSON.parse(oldValue);
console.log(obj, obj2)
},
}
}推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- vue.js组件开发
- 前端开发|Vue2.x API 学习
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- vue.js|后端开发学习Vue(一)
- JS|VUE学习笔记[30-46]
- vue.js|Vue为何弃用经典的Ajax，选择自研Axios（）
- vue|vue3替代vuex的框架piniajs实例教程
- cmd配置npm仓库镜像报错