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函数还支持接受一个附加参数，通常是一个对象，通过这个对象可以提供一些额外的选项。比如：

immediate: 是否立即以当前的值执行回调函数，而不是等到值变化时才执行。
deep: 在侦听一个对象时，是否深度侦听内部属性的变化。

例如：

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。

执行过程：

当调用watch函数时，Vue.js会注册一个侦听器，用于监视checked值的任何变化。
当checked的值发生变化时，Vue.js会自动调用watch函数中提供的回调函数。
在回调函数内，newValue参数代表变化后的新值，而oldValue参数代表变化前的旧值。
通过console.log，我们可以看到每次变化的具体信息输出到控制台。

最后结果：

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

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

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

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

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

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

checked是一个响应式引用（ref），Vue 使用响应式系统跟踪其变化。
当checked的值变化时，Vue 的响应式系统会注意到这一点，并自动调用watch函数中提供的回调函数。
Vue的内部机制负责将变化之后的值和之前的值分别作为newValue和oldValue传给回调函数。

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

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

这种模式非常强大，因为它允许开发者在不必关心如何检测变化和手动调度回调执行的情况下，很容易地响应数据的变化。简而言之，Vue的响应式系统自动处理变化的检测和回调函数的调用，开发者只需要提供"当这个数据变化时，我想做什么"的具体逻辑即可。

vue-cil的watch函数详解

附加选项

猜你喜欢