Vue3中使用setup监听props

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

不过,你可以通过 toRefstoRef 函数来将 props 转换为响应式引用,然后你就可以在 setup 函数中使用 watchwatchEffect 来监听这些响应式引用了。

下面是一个使用 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>

注意:

  1. toRefs 函数会将一个响应式对象(在这个例子中是 props)转换为一个普通的对象,其所有属性都是指向原始对象相应属性的响应式引用。这意味着你可以保持对原始 props 的引用,并且这些引用是响应式的。

  2. 深度监听 :如果你需要监听对象内部属性的变化(如上例中的 user.name),你需要将 watch 的第三个参数 deep 设置为 true。这会导致 Vue 深度遍历对象的所有属性,并在任何属性变化时触发回调函数。

  3. toRef vs toRefs :如果你只需要监听 props 中的某个特定属性,可以使用 toRef 而不是 toRefstoRef 接收一个响应式对象和一个字符串键名,并返回该键名对应的响应式引用。

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

相关推荐
渣哥12 分钟前
你以为 Bean 只是 new 出来?Spring BeanFactory 背后的秘密让人惊讶
javascript·后端·面试
烛阴21 分钟前
为什么游戏开发者都爱 Lua?零基础快速上手指南
前端·lua
大猫会长30 分钟前
tailwindcss出现could not determine executable to run
前端·tailwindcss
Moonbit35 分钟前
MoonBit Pearls Vol.10:prettyprinter:使用函数组合解决结构化数据打印问题
前端·后端·程序员
533_37 分钟前
[css] border 渐变
前端·css
云中雾丽41 分钟前
flutter的dart语言和JavaScript的消息循环机制的异同
前端
地方地方43 分钟前
Vue依赖注入:provide/inject 问题解析与最佳实践
前端·javascript·面试
云中雾丽1 小时前
dart的继承和消息循环机制
前端
世界哪有真情1 小时前
Trae 蓝屏问题
前端·后端·trae
Moment1 小时前
NestJS 在 2025 年:对于后端开发者仍然值得吗 😕😕😕
前端·后端·github