watch监听的使用

watch是什么？

在 Vue 3 中，watch 函数被重新设计为一个独立的 API，用于观察数据变化并执行相应的操作。

watch 函数接受两个参数：

• 第一个参数可以是一个函数或数组。如果是函数，则返回要监听的数据，当数据变化时会触发回调函数；如果是数组，则返回一个数组，包含要监听的多个数据，当任意一个数据变化时都会触发回调函数。
• 第二个参数是一个回调函数，用于处理数据变化时的操作。回调函数接收两个参数，第一个参数为新值，第二个参数为旧值。
• 有两个额外的参数：1.immediate（画面加载后立即执行），2.deep（深度侦听）

案例1-监听单个数据：

传入要侦听的响应式数据（ref对象）和回调函数。回调中可以拿到新值和旧值 

 案例2-监听单个数据：

以数组的方式传入多个ref变量，其中一个变化就会触发侦听的回调函数，回调中可以拿到新值和旧值

监听多个值的变化并计算结果，小案例