Vue3 watch 侦听 props 的变化

最新推荐文章于 2025-04-30 08:44:18 发布

转载最新推荐文章于 2025-04-30 08:44:18 发布 · 1.6w 阅读

9 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/yinyuxing/p/14689550.html

文章标签：

#vue.js #前端 #javascript

vue3 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了在Vue3中如何正确使用watch监听props属性的变化，包括两种写法的示例，特别强调了直接侦听props.name的写法不会触发更新，而应该使用getter方法来实现监听。

转载于

Vue3 watch 侦听 props 的变化 - 尹宇星_Kim - 博客园

watch 有两种写法

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

如果我们想侦听 props 上的属性变化，需要采用第一种写法

// 假设 props 上有个 name 属性
// 下面的写法会生效
watch(
  () => props.name,
  (count, prevCount) => {
    /* ... */
  }
)

// 下面的写法不会被触发
watch(props.name, (count, prevCount) => {
  /* ... */
})