Vue3中watch监听对象的属性值，监听源必须是一个getter函数

Vue3 中使用 watch 侦听对象中的具体属性

1.前言

<script lang="ts" setup>// 接受父组件传递的数据const props =defineProps({test:{type: String,default:''}})// 使用 watch 侦听 props 中的 test 属性watch(// 这种写法不会侦听到 props 中 test 的变化
        props.test,()=>{
            console.log("侦听成功")})watch(// 这种写法会侦听到 props 中 test 的变化()=> props.test,()=>{
            console.log("侦听成功")})</script>

watch 的基本用法

watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数

第一个参数：侦听源，侦听源可以是一下几种

• 一个函数，返回一个值
• 一个 ref
• 一个响应式对象（reactive）
• 或是由以上类型的值组成的数组

第二个参数：侦听源发生变化时要触发的回调函数。

​ (newValue, oldValue) => { /* code */}

​ 当侦听多个来源时，回调函数接受两个数组，分别对应源数组中的新值和旧值

​ ( [ newValue1, newValue2 ] , [ oldValue1 , oldValue2 ]) => {/* code */}

第三个参数：可选对象，可以支持一下这些选项

• immediate：侦听器创建时立即触发回调
• deep：如果源是一个对象，会强制深度遍历，以便在深层级发生变化时触发回调函数
• flush：调整回调函数的刷新时机
• onTrack / onTrigger：调试侦听器的依赖

2. 原因

因为

watch

的侦听源只能是上面的4中情况

const obj =reactive({count:0})// 错误，因为 watch() 中的侦听源是一个 number，最终 source 返回的 getter 函数是一个空，所以就得不到侦听的数据watch(obj.count,(count)=>{
  console.log(`count is: ${count}`)})// 正确，主要思想是，将侦听源转化为以上4种类型（转化为getter函数是最简单方便的）watch(()=> obj.count,(count)=>{
    console.log(`count is: ${count}`)})

3.watch源码分析

exportfunction watch<T= any, Immediate extendsReadonly<boolean>=false>(source:T| WatchSource<T>,cb: any,
  options?: WatchOptions<Immediate>): WatchStopHandle {if(__DEV__ &&!isFunction(cb)){warn(`\`watch(fn, options?)\` signature has been moved to a separate API. `+`Use \`watchEffect(fn, options?)\` instead. \`watch\` now only `+`supports \`watch(source, cb, options?) signature.`)}returndoWatch(source as any, cb, options)}

从源码中可以看出，

watch

接收三个参数：

source

侦听源、

cb

回调函数、

options

侦听配置，最后会返回一个

doWatch

4.doWatch源码分析

functiondoWatch(source: WatchSource | WatchSource[]| WatchEffect | object,cb: WatchCallback |null,{ immediate, deep, flush, onTrack, onTrigger }: WatchOptions =EMPTY_OBJ): WatchStopHandle {// ...// 当前组件实例const instance = currentInstance
// 副作用函数，在初始化effect时使用letgetter:()=> any
// 强制触发侦听let forceTrigger =false// 是否为多数据源。let isMultiSource =false}

doWatch

依然接受三个参数：

source

侦听源、

cb

回调函数、

options

侦听配置

这里着重对侦听源的源码进行分析（source标准化）

• 如果source是ref类型，getter是个返回source.value的函数，forceTrigger取决于source是否是浅层响应式。

if(isRef(source)){getter=()=> source.value
  forceTrigger =isShallow(source)}

• 如果source是reactive类型，getter是个返回source的函数，并将deep设置为true。 当直接侦听一个响应式对象时，侦听器会自动启用深层模式

if(isReactive(source)){getter=()=> source
  deep =true}

例子

<template><div class="container"><h2>obj---{{ obj }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button></div></template><script lang="ts" setup>import{ reactive, watch }from"vue";const obj =reactive({name:"张三",age:18,});constchangeName=()=>{
  obj.name +="++";};constchangeAge=()=>{
  obj.age +=1;};// obj 中的任一属性变化了，都会被监听到watch(obj,()=>{
  console.log("变化了");});</script>

• 如果source是个数组，将isMultiSource设为true，forceTrigger取决于source是否有reactive类型的数据，getter函数中会遍历source，针对不同类型的source做不同处理。

if(isArray(source)){
  isMultiSource =true
  forceTrigger = source.some(isReactive)getter=()=>
    source.map(s=>{if(isRef(s)){return s.value
      }elseif(isReactive(s)){returntraverse(s)}elseif(isFunction(s)){returncallWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER)}else{
        __DEV__ &&warnInvalidSource(s)}})}

• 如果source是个function。存在cb的情况下，getter函数中会执行source，这里source会通过callWithErrorHandling函数执行，在callWithErrorHandling中会处理source执行过程中出现的错误；不存在cb的话，在getter中，如果组件已经被卸载了，直接return，否则判断cleanup（cleanup是在watchEffect中通过onCleanup注册的清理函数），如果存在cleanup执行cleanup，接着执行source，并返回执行结果。source会被callWithAsyncErrorHandling包装，该函数作用会处理source执行过程中出现的错误，与callWithErrorHandling不同的是，callWithAsyncErrorHandling会处理异步错误。

if(isFunction(source)){if(cb){getter=()=>callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER)}else{// watchEffectgetter=()=>{// 如果组件实例已经卸载，直接returnif(instance && instance.isUnmounted){return}// 如果清理函数，则执行清理函数if(cleanup){cleanup()}// 执行source，传入onCleanup，用来注册清理函数returncallWithAsyncErrorHandling(
        source,
        instance,
        ErrorCodes.WATCH_CALLBACK,[onCleanup])}}}

• 其他情况getter会被赋值为一个空函数

getter =NOOP
__DEV__ &&warnInvalidSource(source)

5.总结

其实，

source

标准化主要是根据

source

的类型，将其变成

getter 函数

• 如果 source是ref对象，则创建一个访问 source.value 的getter函数
• 如果source是一个reactive对象，则创建一个访问source的getter函数，并将deep设置为true
• 如果source 是一个函数，则会进一步进行判断第二个参数cb是否存在。最后的getter就是一个简单的对source封装的函数
• 如果source是一个数组，则会对数组中的每个元素进行判断并且返回相应的getter函数。最后返回一个各种getter函数封装成的一个数组

整个

doWatch

方法中的逻辑主要分为一下几步：

1. 通过getter函数来获取数据源的值
2. 通过job方法来调用传入watch中的cb- job中通过调用runner，runner调用getter获取数据源新值- doWatch中闭包缓存了数据源的旧值- 将新旧值作为参数调用cb
3. 将job作为activeEffect的scheduler方法，在后续的数据修改导致的trigger中调用
4. 首次调用，传入了immediate调用job，未传入调用runner，以数据源为被观察者收集依赖实现响应式

**侦听的第一步就是需要通过正确的

getter

函数去获取侦听源的值，所以在使用

watch

侦听数据时，务必保证侦听源的类型是符合官方规定的类型的**