Vue3中使用setup监听props

yang2952423612024-08-23 17:53

在Vue 3中，setup 函数是 Composition API 的一部分，用于定义组件的逻辑。与传统的选项式 API 相比，setup 函数提供了一个更灵活的方式来组织和重用逻辑。当你想在 setup 函数中监听从父组件传递过来的 props 时，由于 setup 函数在组件实例创建之前被调用，因此你不能直接使用 watch 或 watchEffect 直接监听 props，因为此时 props 还未被解析为响应式对象。

不过，你可以通过 toRefs 或 toRef 函数来将 props 转换为响应式引用，然后你就可以在 setup 函数中使用 watch 或 watchEffect 来监听这些响应式引用了。

下面是一个使用 toRefs 来监听 props 的例子：

javascript 复制代码

<template>  
  <div>{{ user.name }}</div>  
</template>  
  
<script>  
import { toRefs, watch } from 'vue';  
  
export default {  
  props: {  
    user: {  
      type: Object,  
      required: true,  
    },  
  },  
  setup(props) {  
    // 使用 toRefs 将 props 转换为响应式引用  
    const { user } = toRefs(props);  
  
    // 现在可以监听 user 的变化了  
    watch(user, (newVal, oldVal) => {  
      console.log(`user changed from ${oldVal.value.name} to ${newVal.value.name}`);  
    }, { deep: true }); // 如果需要深度监听对象内部变化，需要设置 deep: true  
  
    return {  
      // 可以在模板中直接使用 user  
      // 注意：由于使用了 toRefs，所以这里不需要再解构 user，直接使用 user 即可  
      ...toRefs(props), // 如果需要在模板中使用多个 props，可以这样做  
    };  
  },  
};  
</script>

注意：

toRefs 函数会将一个响应式对象（在这个例子中是 props）转换为一个普通的对象，其所有属性都是指向原始对象相应属性的响应式引用。这意味着你可以保持对原始 props 的引用，并且这些引用是响应式的。
深度监听 ：如果你需要监听对象内部属性的变化（如上例中的 user.name），你需要将 watch 的第三个参数 deep 设置为 true。这会导致 Vue 深度遍历对象的所有属性，并在任何属性变化时触发回调函数。
toRef vs toRefs ：如果你只需要监听 props 中的某个特定属性，可以使用 toRef 而不是 toRefs。toRef 接收一个响应式对象和一个字符串键名，并返回该键名对应的响应式引用。

通过这种方法，你可以在 Vue 3 的 setup 函数中灵活地监听和响应 props 的变化。