watch

<script setup>

  import { ref, watch } from 'vue'

  const value1 = ref('')
  const x = ref(0)
  const y = ref(0)
  const sum = ref(0)

  // 监听单个 ref
  watch(value1, (newVal, oldVal) => {
    console.log(`value1 changed from ${oldVal} to ${newVal}`)
  })

  // 监听getter函数
  watch(
    () => x.value + y.value,
    (sum) => {
      console.log(`sum is ${sum}`)
    }
  )

  // 监听多个来源组成的数组
  watch([x, () => y.value], ([newX, newY]) => {
    console.log(`x is ${newX}, y is ${newY}`)
  })

</script>

<template>
  <input ref="my-input" type="text" :value="value1" @input="value1 = $event.target.value" />
</template>