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

相关推荐
fruge1 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician2 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手4 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng5 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科6 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20166 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20098 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔8 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼8 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder8 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js