Vue中监听数组解析

1，简单监听一个参数，demo如下

data() { return { msg: "test---test", } }, watch: { msg(newVal, oldVal) { console.log(newVal) console.log(oldVal) }, }, created() { this.msg = "change" }

2，对数组的监听，上代码

data() { return { list: [1, 2, 3, 4, 6], //需要被监听的数组 } }, watch: { list(newVal, oldVal) { //对数组进行监听 console.log(newVal) console.log(oldVal) }, }, created() { this.list[2] = "666" //将数组对应下标值改变 }

以上方法watch并不会有任何监听结果，此时监听失败。那么这个问题的由来，可以参考这篇文章监听数组变化 解决办法， 方法一 使用vuejs提供的变异方法，例如splice（） push() 等

created() { this.list.splice(1,1,666) //用splice方法，将数组index=1的数值改成换成666 // this.list.push("") // 增加空值 也能监听到 // this.list.pop() // this.list.shift() //this.length = 10 //直接改变数组长度 无效 }

以上方法就可以监听数组中某个值或属性改变，类似还有push，pop，等方法，这里不进行列举。补充一下，如果直接这样写 this.list.length = 7 或 增加深度监听（handler方法和immediate属性）这样都是无法监听到的。直接增加数组长度，而由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

//当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue //当你修改数组的长度时，例如：vm.items.length = newLength

方法二 Vue.set （简洁明了 推荐使用） Vue.set(vm.items, indexOfItem, newValue) (要改变的数组, 下标 , 新值) 或者使用 this.$set(this.list,1,888) 以上例子输出结果，也可以检测到数组变化

[1, 888, 3, 4, 6, ob: Observer] [1, 888, 3, 4, 6, ob: Observer]

以上有个问题,那就是你会发现打印的新值和旧值是一样的。虽然它监听到改变，但是无法判断具体是哪个值发生了改变，官方给出了说明

解决办法

可采用computed计算属性进行对源对象的深拷贝，完成新值更新。

export default { name: 'App', data() { return { list: [1, 2, 3, 4, 6], } }, computed: { newList(){ return JSON.parse(JSON.stringify(this.list)) } }, watch: { newList(newVal, oldVal) { console.log(newVal) console.log(oldVal) }, }, created() { this.$set(this.list,1,888) } }

到这里，就可以实现对数组多方位监听以及数值的变化了，希望可以帮到你。