Vue3 watch API 踩坑记录

最新推荐文章于 2025-03-17 08:02:46 发布

大铭铭子

最新推荐文章于 2025-03-17 08:02:46 发布

阅读量6k

点赞数 2

分类专栏： Vue3 文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/SCUDaming/article/details/122322534

版权

Vue3 专栏收录该内容

1 篇文章

订阅专栏

在Vue3中，遇到监听props属性时遭遇难题，本文记录了Vue3 watch API的使用技巧。包括如何监听响应式数据源，如通过字符串或函数指定，以及如何处理对象和数组变化。当监听对象属性或数组元素时，需要正确配置选项参数。此外，还提到了在组合式API中，watch执行位置的重要性，避免出现Vue的警告和错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇到一个很简单的需求，监听一个props属性。却遇到了问题：监听的属性变化时，没有得到预期的响应。总结如下。

1、Vue3可以使用watchAPI，写法示例：
watch( () => state.count, (count, prevCount) => { /* ... */ } )
①其中第一个参数是要监听的数据源（必须是响应式的），有两种写法：
字符串string： 顶层的 data、props 或 computed property 名。
函数Function： 使用函数表示更复杂的表达式。
②第二个参数是回调函数，数据源变化时执行。

2、监听的属性为对象、数组并想知道其对象属性、数组元素的变化时
使用watch的第三个参数：选项参数，在这个参数中添加{ deep:true }，就可以监听对象内部值的变化。
但新值旧值指向同一个引用，不会保留preCount。
若不使用该选项，则应尝试①直接监听具体的对象属性（数组元素）或②改变整个对象（数组）；

Tip：使用数组的push()、pop()这类方法时不会改变整个数组，只能使用{ deep:true }监听

3、关于watch的位置
在选项式API中，watch单独占一个选项，不会有位置的问题。但在组合式API中，需要注意watch执行的位置。
很个别的情况下，watch必须放在数据定义的后面（Vue的bug or feature？），如：

watch(() => props.arr, () => {
  console.log('监听到改变')
  console.log(comp.value)
}, { deep: true })

let comp = shallowRef(f(props.arr))

会报
[Vue warn]: Unhandled error during execution of watcher callback
和
Uncaught TypeError: Cannot read properties of undefined (reading 'value')
改了顺序之后，警告和错误会消失。