VUE3-watch侦听reactive数据

VUE3-watch侦听reactive数据

特性

• 对于reactive函数获取的代理对象，在进行侦听的时候，只能获取到newValue，无法获取到oldValue
• 对于reactive函数获取的代理对象来说，默认就是开启深度侦听的，这种深度侦听是无法取消的，配置deep:false无效

// 对于reactive函数获取的代理对象，在进行侦听的时候，只能获取到newValue, oldvalue无法获取。
// 对于reactive函数获取的代理对象来说，默认就是开启深度侦听的。
// 这种深度侦听是无法取消的，配置deep: false 无效。
watch(data, (newValue, oldValue) => {
    
    
  console.log(newValue, oldValue);
}, {
    
    
  deep: false
})

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

如果想指定某个属性侦听，则第一个需要侦听的数据，必须是一个函数。即侦听的如果不是响应式的，需要使用函数

  // 怎么办我不想每个属性都侦听，我只想指定某个属性侦听。
  // 只想侦听data中的counter1这个属性。
  // 注意点：第一个需要侦听的数据，必须是一个函数。即侦听的如果不是响应式的，需要使用函数
  watch(() => data.counter1, (newValue, oldValue) => {
    
    
    console.log(newValue, oldValue);
  })

  watch([() => data.counter, () => data.a.b.c.d.counter2], (newValue, oldValue) => {
    
    
    console.log(newValue, oldValue);
  })

代码

<template>
  <div>{
   
   {data.counter}}</div>
  <button @click="data.counter++">计数器1</button>
  <div>{
   
   {data.a.b.c.d.counter2}}</div>
  <button @click="data.a.b.c.d.counter2++">计数器2</button>
</template>

<script>
  import {
      
      
    reactive,
    watch
  } from 'vue'
  export default {
      
      
    setup() {
      
      
      // data
      let data = reactive({
      
      
        counter: 1,
        a: {
      
      
          b: {
      
      
            c: {
      
      
              d: {
      
      
                counter2: 100
              }
            }
          }
        }
      })
      // watch
      // 对于reactive函数获取的代理对象，在进行侦听的时候，只能获取到newValue, oldvalue无法获取。
      // 对于reactive函数获取的代理对象来说，默认就是开启深度侦听的。
      // 这种深度侦听是无法取消的，配置deep: false 无效。
      watch(data, (newValue, oldValue) => {
      
      
        console.log(newValue, oldValue);
      }, {
      
      
        deep: false
      })

      // 怎么办我不想每个属性都侦听，我只想指定某个属性侦听。
      // 只想侦听data中的counter1这个属性。
      // 注意点：第一个需要侦听的数据，必须是一个函数。即侦听的如果不是响应式的，需要使用函数
      // watch(() => data.counter1, (newValue,oldValue) => {
      
      
      //   console.log(newValue, oldValue);
      // })

      // watch(data.a.b, (newValue,oldValue) => {
      
      
      //   console.log(newValue, oldValue);
      // })

      // watch(() => data.a.b.c.d.counter2, (newValue, oldValue) => {
      
      
      //   console.log(newValue,oldValue);
      // })

      // watch ([() => data.counter, ()=> data.a.b.c.d.counter2], (newValue, oldValue) => {
      
      
      //   console.log(newValue, oldValue);
      // })

      // watch(() => data.a.b.c.d.counter2, (newValue, oldValue) => {
      
      
      //   console.log(newValue,oldValue);
      // })
      return {
      
      
        data
      }
    }
  }
</script>

涉及内容

vue3、watch、reactive