vue3，watch监听使用总结。

最新推荐文章于 2025-04-23 14:27:57 发布

开发攻城狮

最新推荐文章于 2025-04-23 14:27:57 发布

阅读量946

点赞数

文章标签： javascript vue https

本文链接：https://blog.csdn.net/weixin_46533797/article/details/121559722

版权

本文详细介绍了Vue.js中如何使用watch监听ref和reactive定义的响应式数据。从单个ref数据的变化监听，到多个ref数据的组合监听，再到reactive对象全属性及特定属性的监听，深入探讨了不同场景下的实现方式和注意事项，包括deep监听的生效条件和陷阱。

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

情况一：监听ref所定义的一个响应式数据

  const name = ref('张三')
  watch(name, (newVal, oldVal) => {
      console.log('name的值变化了',newVal, oldVal)
    },{immediate:true})

情况二：监听ref定义多个响应式数据

  const name = ref('张三')
  //参数一改为数组形式
  watch([name,age], (newVal, oldVal) => {
      console.log('name或者age的值变化了',newVal, oldVal)
    },{immediate:true})

情况三：监听reactive所定义的一个响应式数据的全部属性
注意一：此处无法正确获取oldVal
注意二：强制开启deep:true （deep配置失效）

情况四：监听reactive响应式数据中的某个属性，要将箭头函数写成函数return的方式才有效，一定不要踩坑哦！

 watch(perspn, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    },{deep:false}) //deep:false 配置失效

   const p = reactive({
      name: 'zs',
      age: 18
    })
    //()=>p.name 为要监听的函数
    watch(() => p.name, (newVal, oldVal) => {
      console.log(newVal, oldVal)
    })