侦听器

• 第一个参数：可以是：ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组。
• 第二个参数：一个回调函数，该函数有两个默认参数，分别为依赖的当前值以及改变前的值。
• 第三个参数：一个可选对象。 1.{ deep: true }，用于对对象进行深度侦听。 2.{flush: 'post'}，回调默认为DOM更新前调用，flush: 'post'表示让侦听器回调能访问被 Vue 更新之后的DOM。

非必要不建议使用深度侦听，因为其会侦听所有嵌套属性，开销很大。

<script setup>
import { ref, watch } from 'vue'

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX,oldX) => {
  console.log(`x is ${newX}`)
})

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

// 多个来源组成的数组
watch([x, () => y.value], 
      ([newX, newY]) => {
  		console.log(`x is ${newX} and y is ${newY}`)
	}
	//{ deep: true } //对象的深度侦听
)
</script>

立即侦听 watchEffect()

watch() 侦听器只有在依赖变更时触发，如果想要在侦听器被创建时就立即执行一遍回调，可以使用 watchEffect() 。

watchEffect() 接收一个回调函数，该回调函数会立即执行一次，当函数中的依赖变更时，回调会再次执行。

可以将watchEffect()

const id =ref<string>('001')
const stop=watchEffect(() => console.log(id.value))
stop()//当stop被调用时，stop所代表的监听函数终止监听

停止侦听器

侦听器会随着宿主组件的销毁而销毁，但如果侦听器是使用异步语句创建的，那么他可能不会绑定到当前组件。因此必须手动停止它，以防内存泄漏。

可以通过调用 watch 或 watchEffect 返回的函数来手动停止一个侦听器：

const unwatch = watchEffect(() => {})

// ...当该侦听器不再需要时
unwatch()