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

相关推荐
前端工作日常7 分钟前
我学习到的Vue2.6的prop修饰符
vue.js
gnip15 分钟前
JavaScript事件流
前端·javascript
小菜全27 分钟前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C31 分钟前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG33 分钟前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_4569042737 分钟前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路40 分钟前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架
aaaweiaaaaaa41 分钟前
HTML和CSS学习
前端·css·学习·html
秋秋小事1 小时前
React Hooks useContext
前端·javascript·react.js
Jinuss1 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3