Vue3.2父子组件间ref数组监听：为什么子组件watch中监听父组件ref数组需要使用箭头函数？-js教程-PHP中文网

Vue3.2父子组件间ref数组监听：为什么子组件watch中监听父组件ref数组需要使用箭头函数？

碧海醫心

发布： 2025-03-02 08:24:11

原创

270人浏览过

vue3.2父子组件间ref数组监听：为什么子组件watch中监听父组件ref数组需要使用箭头函数？

深入Vue3.2父子组件间ref数组监听机制

在Vue3.2中，利用ref实现父子组件间数据传递和监听是常见场景。本文剖析一个父子组件间ref数组监听的典型问题：为何子组件watch中监听父组件ref数组需要使用箭头函数() => props.tabledata。

问题：父组件通过v-model将ref数组tabledata传递给子组件，子组件需监听tabledata变化并响应。然而，直接在watch中使用props.tabledata无法触发监听函数。

代码示例：

立即学习“前端免费学习笔记（深入）”；

父组件：

<Comp v-model:tabledata="tabledata"></Comp>

登录后复制

import { ref } from 'vue';
export default {
  setup() {
    const tabledata = ref([]);
    const getcommentlist = async () => {
      const res = await api(); // 模拟异步请求
      tabledata.value = res.data;
    };
    return { tabledata, getcommentlist };
  }
};

登录后复制

子组件：

<script setup>
import { defineProps, watch } from 'vue';
const props = defineProps({
  tabledata: {
    type: Array,
    default: () => [],
  }
});

watch(
  () => props.tabledata, // 箭头函数为何必要？
  (newval) => {
    console.log('tabledata changed:', newval);
  },
  { deep: true }
);
</script>

登录后复制

核心问题在于子组件watch的第一个参数。Vue3的watch API要求第一个参数为ref或() => T类型的函数。

props.tabledata本身是ref对象，而非简单数组，它是一个响应式对象，包含value属性持有实际数组数据。直接使用props.tabledata，watch不会监听其内部value属性的变化。

箭头函数() => props.tabledata的作用是返回props.tabledata的当前值。watch监听此函数返回值的变化，间接监听tabledata.value的变化。只有tabledata.value改变时，箭头函数返回值才改变，触发watch回调。

更简洁高效的方案：

在子组件中，可直接使用props.tabledata.value作为watch参数，并设置deep: true：

watch(
  () => props.tabledata.value,
  (newval) => {
    console.log('tabledata changed:', newval);
  },
  { deep: true }
);

登录后复制

或更推荐的写法，直接监听props.tabledata，watch会自动追踪ref对象的变化：

watch(
  props.tabledata,
  (newVal) => {
    console.log('tableData changed:', newVal);
  },
  { deep: true }
);

登录后复制

关键：deep: true选项确保watch检测数组内部元素的变化。缺少deep: true，只有当整个tabledata.value数组被替换时，watch才会触发。

以上就是Vue3.2父子组件间ref数组监听：为什么子组件watch中监听父组件ref数组需要使用箭头函数？的详细内容，更多请关注php中文网其它相关文章！