VUE3-watch侦听ref包裹对象

最新推荐文章于 2025-05-20 22:59:29 发布

兜里揣着星星

最新推荐文章于 2025-05-20 22:59:29 发布

阅读量900

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript VUE3 ref RefImpl Proxy

本文链接：https://blog.youkuaiyun.com/MCCLS/article/details/131815277

文章讨论了在Vue3中如何使用watch来监听ref包裹的对象和嵌套的响应式属性。通过示例代码，解释了watch对RefImpl对象、Proxy对象的监听，以及如何通过函数形式实现对非响应式值的监听。同时指出，对于深层嵌套的属性，需要使用函数形式的watch来实现深度监听。

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

VUE3-watch侦听ref包裹对象

回顾响应式

ref(100) ===> RefImpl对象，引用对象（使用object.defineProperty实现）。可以监视这个引用对象。
reactive ===> Proxy对象，代理对象（使用Proxy实现），可以监视这个代理对象。
ref({}) ===> RefImpl对象，引用对象（使用object.defineProperty + Proxy），可以监视代理对象和引用对象

关键点

watch侦听是侦听响应式对象，即RefImpl对象、Proxy对象，如果不为响应式则需要使用函数形式

代码

<template>
  <div>计数器：{{counterRefImpl}}</div>
  <button @click="counterRefImpl++">点我加1</button>
  <div>计数器2：{{data.a.b.c.counter}}</div>
  <button @click="data.a.b.c.counter++">点我加1</button>
  <div>计数器3：{{data.counter}}</div>
  <button @click="data.counter++">点我加1</button>
</template>

<script>
  import {
    ref,
    watch
  } from 'vue'
  export default {
    setup() {
      let counterRefImpl = ref(1)
      let data = ref({
        counter: 2,
        a: {
          b: {
            c: {
              counter: 1
            }
          }
        }
      })

      // 监视data
      // data.value为一个代理对象
      // oldValue 又是拿不到的
      // deep配置无效。
      watch(data.value, (newValue, oldValue) => {
        console.log(newValue, oldValue);
      }, {
        deep: false
      })

      // data是一个RefImpl对象。支持deep配置的。默认是没有开启深度监视的
      // watch(data, (newValue, oldValue) => {
      //   console.log(newValue, oldValue);
      // }, {deep: true})

      // watch
      // 错误的， 因为counterRefImpl.value 为一个值，不是一个响应式对象
      // watch(data.value.counter, (newValue, oldValue) => {})
      // watch(counterRefImpl.value, (newValue, oldValue) => {})

      console.log(counterRefImpl);
      // 可以监视到的,使用函数形式
      watch(() => data.value.counter, (newValue, oldValue) => {
        console.log(newValue, oldValue);
      })
      watch(() => counterRefImpl.value, (newValue, oldValue) => {
        console.log(newValue, oldValue);
      })

      return {
        data,
        counterRefImpl
      }
    }
  }
</script>