Vue中的数组监听——Vue Watch数组详解

一、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 数组进行监听。

先上代码：

  
   

  <script>
    import MyList from './MyList.vue';
    export default {
      data() {
        return {
          dataList: []
        };
      },
      methods: {
        getDataList() {
          setTimeout(() => {
            this.dataList = [1,2,3,4,5,6];
          }, 2000);
        },
      },
      created() {
        this.getDataList();
      },
      components: {
        MyList
      }
    };
  </script>

  
   

  <script>
    export default {
      props: {
        list: {
          type: Array,
          default: () => []
        }
      },
      watch: {
        list(val, oldVal) {
          console.log(`新值：${JSON.stringify(val)}, 旧值: ${JSON.stringify(oldVal)}`);
        },
        deep: true
      }
    };
  </script>

在父组件中，我们使用 my-list 组件，并将 dataList 数组传递给子组件，此时子组件对 dataList 进行监听。当 dataList 数组发生变化时，watch 中的回调方法会被触发。

不难发现，Vue Watch数组可以很方便地实现父组件与子组件之间的通信。

四、Vue Watch数组与性能优化

Vue Watch数组的深度监听是需要耗费一定性能的，如果我们在复杂的对象数据结构中进行深度监听，那么很可能会影响页面性能。因此，我们在使用 Watch 数组时，需要注意优化性能。

下面是一些 Vue Watch 数组的性能优化方法：

1、避免使用深度监听(deep:true)

在监听大型数组时，不要使用深度监听，否则可能会导致内存占用过多的问题。相反地，应该使用 watch来监听特定的索引或属性。

2、使用父子组件传参

如果只需监听数组中的个别项目，可以考虑使用父子组件传参来监听特定的子项目。这样可以减少监听的数据量，提高监听性能。

3、使用计算属性

在一些情况下，可以使用计算属性代替 watch 数组。计算属性相当于缓存的数据，只有当数据发生改变时，它才会进行重新计算。这样就可以减轻监听器的压力，提高页面性能。

综上，我们在使用 Vue Watch 数组时，应当注意性能问题，避免多余地监听数据。

五、总结

Vue Watch数组是Vue框架中的一个重要功能，它可以自动监听数组数据的变化，以及父子组件之间的通信。但是，在使用 Watch 数组时，需要注意性能的问题，特别是在数据量较大的情况下，应该尽量避免使用深度监听，优化性能。