vue3 watch props 监听属性变化

最新推荐文章于 2025-11-10 10:21:06 发布

原创最新推荐文章于 2025-11-10 10:21:06 发布 · 3.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

24 篇文章

订阅专栏

这篇博客探讨了如何在Vue应用中利用watch监听visible属性的变化，以控制模态框的显示与隐藏。核心代码展示了如何定义props并使用toRefs及watch方法，当visible值改变时触发alert。这为开发者提供了一种在组件间同步状态并执行相应操作的方法。

我的需求是弹出一个模态框。使用visible控制隐藏与现实，需要watch，visible变化，执行其他相关操作。
核心代码如下：

import { watch, toRefs } from "vue";
const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});
const visible = toRefs(props).visible;
watch(visible, (newValue, oldValue) => {
  alert(newValue);
});