一、Vue Watch数组介绍
Vue是一款流行的前端框架，它采用了响应式的数据流。Vue Watch是Vue框架中的一种观察者模式。在Vue中Watch可以监听数据的变化并且进行一些操作，相当于设置了一个自动监听，当数据变化时就可以自动触发。
而Vue Watch数组则是针对数组类型数据的监听，当数组内的数据变化时，Vue Watch数组可以自动监听到这些变化并作出相应的处理。
二、Vue Watch数组的用法
Vue Watch数组是通过使用Vue的watch方法来实现的。在Vue实例中声明一个watch对象，然后在watch对象中使用$watch来监听数组的变化。
具体的代码如下：
new Vue({
el:'#app',
data(){
return {
array:[]
}
},
watch:{
array:{
handler(newArray,oldArray){
console.log('数组变化了',newArray,oldArray)
},
deep:true
}
}
})
上面的代码中，我们以数组array为例进行监听，handler为回调方法，当数组中的数据项发生变化时，会自动触发handler。
其中，deep:true表示深度监听，它会监听数组中的每一个子元素的变化，即当数组中的对象属性发生变化时，也能被监听到。
三、Vue Watch数组与Vue组件
Vue Watch数组不仅可以在Vue实例中使用，它同样可以在Vue组件中使用。这时候我们需要通过 props 将数组传递给子组件，在子组件中对 Watch 数组进行监听。
先上代码：
父组件：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/182395.html
微信扫一扫 
支付宝扫一扫 