侦听器(监视)

计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。

侦听数据源类型

watch 的第一个参数可以是不同形式的“数据源”：它可以是

• 一个 ref (包括计算属性)
• 一个响应式对象
• 一个 getter 函数
• 或多个数据源组成的数组

Ref基本类型数据

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

  const sum = ref(0)

  const increment = () => {
    sum.value++
  }

  // 基本类型数据, 无需写.value
  /**
   * watch(监视的变量,回调函数)
   */
  const watchSum = watch(sum, (newVal, oldVal) => {
    console.log(`sum 从  ${oldVal} 变成了 ${newVal}`)
    if (newVal > 10) {
      watchSum()
      console.log('监视停止')
    }
  })
</script>

<template>
  <div>
    <h1>ref基本类型数据</h1>
    <p>Sum: {{ sum }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

Ref对象类型数据