Vue 3.2中父子组件传ref数组监听时watch的正确使用方法

在Vue 3.2的项目开发中，父子组件间的数据传递与监听是常见的需求。当涉及到传递ref数组并进行监听时，正确使用watch能确保数据的及时响应和处理。

理解Vue 3.2中ref的概念很重要。ref是用来创建响应式数据的函数，对于数组使用ref包裹后，它会变成响应式数组。在父子组件传参时，父组件可以将ref数组传递给子组件，子组件接收后可能需要对其变化进行监听。

在子组件中使用watch监听ref数组时，需要注意一些要点。watch函数有多种使用方式，最常见的是监听一个特定的数据源，并在数据变化时执行相应的回调函数。例如：

import { ref, watch } from 'vue';

export default {
  props: {
    parentArray: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const localArray = ref([]);

    watch(() => props.parentArray, (newValue, oldValue) => {
      // 这里处理数组变化的逻辑
      localArray.value = [...newValue];
    }, {
      deep: true
    });

    return {
      localArray
    };
  }
};

这里通过watch监听props中的parentArray，当数组变化时，会触发回调函数。注意{ deep: true }这个选项，因为数组是复杂数据类型，设置deep为true才能确保对象内部属性的变化也能被监听到。

watch还支持监听多个数据源。如果在子组件中除了监听传递过来的ref数组，还需要监听其他数据，可以这样做：

watch([() => props.parentArray, () => anotherRefValue], (newValues, oldValues) => {
  // 这里处理多个数据源变化的逻辑
});

在Vue 3.2中，使用watch监听父子组件间传递的ref数组时，准确把握watch的使用方法，包括监听单个或多个数据源，以及合理设置deep选项等，能让我们更高效地处理数据变化，优化组件间的交互逻辑，提升整个项目的稳定性和响应性，为开发者带来更好的开发体验，也为用户提供更流畅的应用体验。