• watchEffect 响应式的追踪所有依赖的值
  • count.value
  • watchEffect(() => watch all data )
  • 在依赖改变的时候

#watchEffect

立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

• 立即执行

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

#停止侦听

当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时， 侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。

在一些情况下，也可以显式调用返回值以停止侦听：

• watchEffect 会返回一个stop 函数，当函数执行的时候，会立即停止watchEffect 监听

/* watchEffect 会返回一个stop 函数，当函数执行的时候，会立即停止*/
const stop = watchEffect(() => {
  /* ... */
})
// 之后
stop()



/* */
 setup() {
    const count = ref(10086)
    setTimeout(() => {
      count.value = 20026
    }, 2000);
    watchEffect((onInvalidate) => {
      console.log(count.value, 'wathc')
      onInvalidate(() => {
        console.log("on in validate")
      })
    })
    return {

    }
  }


        onBeforeUpdate(()=>{
            console.log('on be fore update ...')
        })

 watchEffect((onInvalidate) => {
      console.log(count.value, 'wathc')

      onInvalidate(() => {
        console.log("on in validate")
      })

    },{
// 执行时机  组件更新前，后， 同步
      // flush?: 'pre' | 'post' | 'sync'
flush:'post'

    })

类型声明：

function watchEffect(
  effect: (onInvalidate: InvalidateCbRegistrator) => void,
  options?: WatchEffectOptions
): StopHandle

interface WatchEffectOptions {
  flush?: 'pre' | 'post' | 'sync' // 默认：'pre'
  onTrack?: (event: DebuggerEvent) => void
  onTrigger?: (event: DebuggerEvent) => void
}

interface DebuggerEvent {
  effect: ReactiveEffect
  target: any
  type: OperationTypes
  key: string | symbol | undefined
}

type InvalidateCbRegistrator = (invalidate: () => void) => void

type StopHandle = () => void

#watch

watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。

• 与 watchEffect 相比，watch 允许我们：
  • 惰性地执行副作用；
  • 更具体地说明应触发侦听器重新运行的状态；
  • 访问被侦听状态的先前值和当前值。

#侦听单一源

侦听器数据源可以是一个具有返回值的 getter 函数，也可以直接是一个 ref：

/**
 * param1  函数返回要监听的参数
 * param2  函数参数为 变化的newValue
 */
  watch(
    () => {
      return props.btnm;
    }
    ,
     (newValue,oldvalue) => {
            console.log(newValue)
  })

  
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
  /* ... */
})

#侦听多个源

侦听器还可以使用数组以同时侦听多个源：

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
})

#与 watchEffect 相同的行为

watch 与 watchEffect 在手动停止侦听、清除副作用 (将 onInvalidate 作为第三个参数传递给回调)、刷新时机和调试方面有相同的行为。