Vue3 使用watchEffect高级侦听器

watchEffect

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

<template>
  <div>
      <input type="text" v-model="value" />
      <input type="text" v-model="value1" />
      <button @click="stopWatch">停止监听</button>
  </div>
</template>

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

let value = ref<string>('')

let value1 = ref<string>('')

const stop =  watchEffect((oninvalidate) => {
  console.log('监听', value.value)
  console.log('监听', value1.value)
  oninvalidate(() => {
      console.log('1')
  })
})

// 停止监听
const stopWatch = () => stop()

</script>

<style scoped>

</style>