--- theme: yu highlight: a11y-dark --- # 前言以下文章是我个人学习的输出方式，目的是为了夯实自己的技术基础。 # `watch()` ## 介绍 `watch()` 用于侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。 ## 特点 `watch()` 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数，只能侦听以下四种数据： - `ref` 定义的数据； - `reactive` 定义的数据； - 一个函数，返回一个值（`getter`函数）； - ...或是由以上类型的值组成的数组； ## 示例一监视 `ref` 定义的【基本类型】数据：直接写数据名即可，监视的是其 `value` 值的改变。 ```ts const count = ref(0) watch(count, (count, prevCount) => { /* ... */ }) ``` ## 示例二监视 `ref` 定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。注意点如下： 1. 若修改 `ref` 定义的对象中的属性，`newValue` 和 `oldValue` 都是新值，因为它们是同一个对象； 2. 若修改整个 `ref` 定义的对象，`newValue` 是新值，`oldValue` 是旧值，因为不是同一个对象了； ```ts ``` ## 示例三监视 `reactive` 定义的【对象类型】数据，且默认开启了深度监视。 ```ts const state = reactive({ count: 0 }) watch(state, () => { /* 深层级变更状态所触发的回调 */ }) ``` ## 示例四监视 `ref` 或 `reactive` 定义的【对象类型】数据中的【某个属性】，注意点如下： 1. 若该属性值不是【对象类型】，需要写成函数形式。 1. 若该属性值依然是【对象类型】，可直接编，也可写成函数，建议写成函数。结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。 ```ts const state = reactive({ count: 0 }) watch( () => state.count, (count, prevCount) => { /* ... */ } ) ``` ## 示例五监视上述的多个数据 ```ts watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => { /* ... */ }) ``` # `watchEffect()` ## 介绍立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。 ## `watch()` 对比 `watchEffect()` 1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同； 2. `watch()`：要明确指出监视的数据； 3. `watchEffect()`：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）； ## 示例 ```ts const count = ref(0) watch(count, (count, prevCount) => { /* ... */ }) watchEffect(() => console.log(count.value)) // -> 输出 0 count.value++ // -> 输出 1 ```

情况二：监视【ref】定义的【对象类型】数据

姓名：{{ person.name }}

年龄：{{ person.age }}