7-watchEffect高级侦听器

 

<template>

  <input id="ipt" v-model="message"/>
  <input v-model="message2"/>

  <button @click="stopWatch">停止监听</button>

</template>

<script setup lang="ts">
  import { watchEffect, ref } from 'vue'

  let message = ref<string>('飞机')
  let message2 = ref<string>('飞机杯子')

  const stop = watchEffect((oninvalidate) => {
    console.log('message===>', message.value)
    console.log('message2===>', message2.value)  //可以监听多个值
    oninvalidate(() => {
      console.log('before')
    })

    let ipt:HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement
    console.log(ipt, 'xxxxxx')
  }, {
    flush: 'post', //post 组件更新后执行, pre 组件更新前执行, sync 强制效果始终同步触发
    onTrigger(e) {
      console.log(e)
    }
  })
  //watchEffect会返回一个函数  触发后可以停止监听
  const stopWatch = () => stop()

</script>

<style lang="less" scoped>

</style>