7-watchEffect高级侦听器

最新推荐文章于 2024-06-09 16:42:50 发布

sunnyboysix

最新推荐文章于 2024-06-09 16:42:50 发布

阅读量145

点赞数

分类专栏： vue3官网学习文章标签： vue3

本文链接：https://blog.csdn.net/sunnyboysix/article/details/126605631

版权

vue3官网学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<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>