vue-cil的watch函数详解

在Vue中，watch是一个非常有用的API，用于侦听一个响应式引用（例如由ref创建）或响应式对象（由reactive创建）的属性，并在值变化时执行回调函数。Vue 3的Composition API引入了这种侦听方式，让组件逻辑的组织更加灵活。

以提供的代码片段为例：

watch(checked, xxxx)

这里，watch函数接受两个参数：

第一个参数是要侦听的目标。它可以是一个响应式引用（ref）或是响应式对象的某个属性。在您的示例中，侦听的目标是checked，它很可能是通过ref创建的一个响应式引用，用于追踪某个特定的值（在这个场景下，很可能是一个开关的状态）。
第二个参数 (xxxx) 应该是一个回调函数，当第一个参数所指向的值改变时，这个回调函数将被调用。函数通常接收两个参数：newValue和oldValue，分别表示变化后的新值和变化前的旧值。在您的watch示例中，由于未指定具体的回调函数，用xxxx代替，这意味着您应该在此处提供一个具体的函数来处理值的变化。

例如，如果要侦听checked的变化，并在每次变化时打印新旧值，可以这样写：

watch(checked, (newValue, oldValue) => {console.log(`checked从${oldValue}变为${newValue}`);
});

watch函数还支持接受一个附加参数，通常是一个对象，通过这个对象可以提供一些额外的选项。比如：

例如：

watch(checked, (newValue, oldValue) => {console.log(`checked从${oldValue}变为${newValue}`);
}, {immediate: true,deep: false
});

在这个例子中，如果immediate设置为true，那么回调函数会立即执行一次，使用checked的当前值作为newValue，而oldValue会是undefined。

综上，watch是Vue Composition API中非常强大的一个特性，它使状态变化的侦听和处理变得简单高效。
我们将通过一个具体的示例来详细说明watch函数如何工作，以及当checked值发生变化时，它的执行步骤和过程：

1.首先，假设我们在Vue 3的组件中有一个名为checked的响应式数据，它通过ref来创建，并且初始值为false。它可能代表一个开关组件（比如一个UI开关）的状态。

import { ref, watch } from 'vue';const checked = ref(false);

2.接着，我们使用watch来侦听checked的变化。当checked的值发生变化时，我们将通过控制台日志输出旧值和新值。

watch(checked, (newValue, oldValue) => {console.log(`checked从${oldValue}变为${newValue}`);
});

现在，让我们来模拟checked值的变化过程以及watch函数的执行步骤：

初始状态： checked的值为false。
状态变化 - 第一次改变： 如果在某个事件（例如用户点击了一个开关按钮）中我们将checked的值设置为true，watch侦听器将检测到这个变化。
- newValue将是改变后的值true，而oldValue将是变化前的值false。
- 控制台将输出：checked从false变为true。
状态变化 - 第二次改变： 如果用户再次点击开关将其关闭，我们设置checked的值回false。
- 这次，newValue为false，oldValue为true。
- 控制台再次输出，反映这次变化：checked从true变为false。

执行过程：

最后结果：

每当checked改变时，你将在开发者控制台看到相应的日志输出，这个输出展示了checked值从一个状态变化到另一个状态的过程，从而帮助开发者追踪和调试程序。

这种watch侦听机制非常有助于在构建响应式Web应用时，对状态变化进行管理和响应。

回调函数是一种在编程中广泛使用的概念，特别是在处理异步操作如事件监听、服务器请求、文件读写等场景中。简单来说，回调函数是一个被作为参数传递给另一个函数，并且这个回调函数在那个函数执行完之后被调用的函数。

在JavaScript或Vue中，回调函数的工作机制允许我们在某些操作完成时执行特定的代码，而不需要立即执行。这对于需要等待某些事件发生或等待异步操作完成的情况尤其有用，例如等待用户操作、数据请求返回结果等。

在提到的watch函数中的用法中：

watch(checked, (newValue, oldValue) => {console.log(`checked从${oldValue}变为${newValue}`);
});

这里的关键是Vue的响应式系统如何追踪和通知值的变化：

追踪变化：当你通过ref函数创建一个响应式引用时，Vue 内部使用了Proxy等技术来包装这个值，从而能够追踪对它的访问和修改。
依赖收集：当watch函数被调用并注册了回调函数时，Vue会将这个回调函数记为checked的一个"依赖"。这意味着，每当checked变化时，所有注册到它的"依赖"（在这个例子中就是我们的回调函数）都会被通知。
触发更新：一旦checked的值发生变化，Vue 就会调用回调函数，同时将新值和旧值作为参数传递给它。这就是回调函数能够接收到newValue和oldValue的原因。