Vue3+TypeScript学习笔记（五）

1. watch侦听器用于监听组件中响应式数据的变化，在被监听数据发生改变时触发回调。

2. watch侦听器的几种写法：

   1. 仅侦听单个普通类型变量

let message = ref<string>('小满')
/** 正常监听 */
watch(message,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{
    deep:false,        // 是否开启深度监听
    immediate:false,    // 是否一上来就调用
    flush:'pre'        // 默认为pre,表明watch调用的时机。pre是在组件更新之前调用,sync是同步调用,post是在组件更新之后调用
})

     2. 侦听多个普通类型变量

let message = ref<string>('小满')
let message2 = ref<string>('小满')
watch([message,message2],(newValue,oldValue)=>{
    console.log(newValue,oldValue)
})

     3. 侦听ref修饰的引用类型变量

let message3 = ref({
  foo:{
        name:'小满'
    }
})
/* 此时改变message3中name的值时可以侦听到变化，但无法获取到oldValue */
watch(message3,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{
  // 需显式开启deep
    deep:true
})

     4. 侦听reactive修饰的引用类型变量

let message4 = reactive({
  foo:{
        name:'小满'
    }
})
/* 此时改变message4中name的值时可以侦听到变化，但无法获取到oldValue */
watch(message3,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{
  // 无需显式开启deep
})

     5. 侦听ref修饰的引用类型变量中的某个属性

let message = ref({
  foo:{
    name:'小满'
  }
})
/* 注意这里需要使用回调函数返回对象中的属性值,可以监听到oldValue中的数据 */
watch(()=>message3.value.foo.name,(newValue,oldValue)=>{    //需要加上.value
    console.log(newValue,oldValue)
})

     6. 侦听reactive修饰的引用类型变量中的某个属性

let message = reactive({
  foo:{
    name:'小满'
  }
})
/* 注意这里需要使用回调函数返回对象中的属性值,可以监听到oldValue中的数据 */
watch(() => message4.foo.name,(newValue,oldValue)=>{    //无需.value
    console.log(newValue,oldValue)
})

完整代码：

<template>
  <input type="text" v-model="message">
    <input type="text" v-model="message2">
      <hr>
        <input type="text" v-model="message3.foo.name">
          <input type="text" v-model="message4.foo.name">
          </template>

<script setup lang="ts">
  import { toNumber } from '@vue/shared';
  import { ref, reactive,watch } from 'vue'

  let message = ref<string>('小满')
  let message2 = ref<string>('大满')

  let message3 = ref({
    foo:{
      name:'小满'
    }
  })
  let message4 = reactive({
    foo:{
      name:'小满'
    }
  })

  /** 正常监听 */
  watch(message,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
  },{
    deep:false,        // 是否开启深度监听
    immediate:false,    // 是否一上来就调用
    flush:'pre'        // 默认为pre,表明watch调用的时机。pre是在组件更新之前调用,sync是同步调用,post是在组件更新之后调用
  })

  /** 正常监听 */
  watch([message,message2],(newValue,oldValue)=>{
    console.log(newValue,oldValue)
  })

  /** 无法获取oldValue(需手动开启深度监听) */
  watch(message3,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
  },{
    deep:true
  })

  /** 无法获取oldValue(无需手动开启深度监听) */
  watch(message,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
  })

  /** 希望获取对象中的某一属性(ref包装)时使用,可正常监听 */
  watch(() => message3.value.foo.name,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
  })

  /** 希望获取对象中的某一属性(reactive包装)时使用,可正常监听 */
  watch(() => message4.foo.name,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
  })
</script>

<style scoped></style>