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 的变化。

相关推荐
无奈何杨14 分钟前
CoolGuard增加枚举字段支持,条件编辑优化,展望指标取值不同
前端·后端
掘金安东尼16 分钟前
工具过多:如何管理前端工具泛滥?
前端
江城开朗的豌豆27 分钟前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
brzhang36 分钟前
当AI接管80%的执行,你“不可替代”的价值,藏在这20%里
前端·后端·架构
江城开朗的豌豆42 分钟前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
Sailing1 小时前
别再放任用户乱填 IP 了!一套前端 IP 与 CIDR 校验的高效方案
前端·javascript·面试
程序员爱钓鱼3 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel11 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着11 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友12 小时前
什么是API签名?
前端·后端·安全