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

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

特点：Vue3 中的 watch 只能监视以下四种数据：

1.re f定义的数据（包括计算属性）

2.reactive定义的数据

3.函数返回一个值（getter函数）。

4.一个包含上述内容的数组。

使用watch监视ref定义的变量

基本用法

案例

解除监视

使用watch监视ref定义的对象

监视 ref 定义的对象类型数据，和基本数据类型用法一致

直接写数据名，监视的是对象的地址值，若想监视对象内部的数据，要手动开启深度监视。

注意：

若修改的是 ref 定义的对象中的属性， newValue 和 oldValue 都是新值，因为它们是同一个对象。

若修改整个 ref 定义的对象， newValue 是新值，oldValue 是旧值，因为不是同一个对象了。

使用watch监听reactive定义的对象

监视 reactive 定义的对象类型数据，且默认开启了深度监视。

打印的结果如图

监视 ref 或 reactive 定义的对象类型数据中的某个属性，注意点如下：

若该属性值不是对象类型，需要写成函数形式。

若该属性值是依然是对象类型，可直接编，也可写成函数，建议写成函数。

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

监听对象中的多个属性

watchEffect

官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

watch对比watchEffect：

• 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
• watch：要明确指出监视的数据
• watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

示例代码：