Vue3中watch和watchEffect区别和用法

使用过 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