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

发布时间：2023-05-17

一、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 数组进行监听。 先上代码： 父组件：

<template>
  <div>
    <my-list :list="dataList"></my-list>
  </div>
</template>
<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>

子组件：

<template>
  <ul>
    <li v-for="item in list" :key="item">{{ item }}</li>
  </ul>
</template>
<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 数组时，需要注意性能的问题，特别是在数据量较大的情况下，应该尽量避免使用深度监听，优化性能。

推荐文章