使用过 Vue 的小伙伴，不管时 Vue2 还是 Vue3，我相信你都用过 Vue 中的监听器。监听器的作用就和它的名字一样：用来监听某个东西是否发生变化！我们很多需求都会用到监听器 watch，但是 Vue2 和 Vue3 中的监听器的用法有些许不一样，这就让一些从 Vue2 转 Vue3 的小伙伴不太适应，所以，我们今天就来好好学一学 Vue3 中的监听器如何使用！
1.环境准备
为了方便演示和编写代码，我们直接使用 vite 搭建一个 Vue3 的基础项目。
创建命令：
npm create vite@latest my-vite-app --template vue-ts
删除 App.vue 中一些不需要的东西，然后运行项目：
2.watch
2.1 watch 基本使用
在 Vue3 中的组合式 API 中，watch 的作用和 Vue2 中的 watch 作用是一样的，他们都是用来监听响应式状态发生变化的，当响应式状态发生变化时，都会触发一个回调函数。
代码如下：
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<p>{
{ message }}</p>
<button @click="changeMsg">更改 message</button>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const message = ref("小猪课堂");
watch(message, (newValue, oldValue) => {
console.log("新的值:", newValue);
console.log("旧的值:", oldValue);
});
const changeMsg = () => { message.value = "张三"; };
</script>上段代码中我们点击按钮就会更改响应式变量 message 的值。我们又使用 watch 监听器监听了 message 变量，当它发生变化时，就会触发 watch 监听函数中的回调函数，并且回调函数默认接收两个参数：新值和旧值。
注意：当我们第一进入页面时，watch 监听函数的回调函数是不会执行的。
输出结果：
2.2 watch 监听类型
前面我们一直强调 watch 监听的是响应式数据，如果我们监听的数据不是响应式的，那么可能会抛出如下警告：
那么哪些数据是属于响应式的，或者换个说法，watch 监听器可以监听哪些形式的数据呢？
（1）ref 和计算属性
ref 定义的数据我们是可以监听到的，因为我们前面的代码以及证明了。除此之外，计算属性也是可以监听到的，比如下列代码：
const message = ref("小猪课堂");
const newMessage = computed(() => {
return message.valu