一、作用

监视数据的变化（和vue2中watch作用一致）

二、特点

vue3中的watch只能监视以下四种数据：

1. ref定义的数据
2. reactive定义的数据
3. 函数返回一个值（getter函数）
4. 一个包含上述内容的数组

情况一：ref定义的数据的监听

<template>
<div>
    <h2>当前求和为：{{ sum }}</h2>
    <button @click="changeSum">点击按钮数字加一</button>
</div>
</template>

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

let sum = ref(0)

//监视sum
watch(sum, (newValue, oldValue)=> {
    console.log('sum加一了', newValue, oldValue)
})

function changeSum() {
    sum.value += 1
}
</script>

监听sum，也能停止监听sum

let stopWatch = watch(sum, (newValue, oldValue)=> {
    if(sum.value >= 10) {
        //取消监听sum
        stopWatch()
    }
    console.log('sum加一了', newValue, oldValue)
})

控制台打印出来结果为：

能看出当sum等于10之后，按钮可以继续加一，但watch已经取消监听了。