VUE3-watch侦听ref包裹对象

文章讨论了在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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9QgtFg3Q-1689761730559)(https://gitee.com/zhang_luwei/image-resources/raw/master/image/1689647918250.jpg)]

涉及内容

VUE3、ref、RefImpl、Proxy、watch

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值