vue-cil的watch函数详解

2024-02-07 12:44

本文主要是介绍vue-cil的watch函数详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

以提供的代码片段为例:

watch(checked, xxxx)

这里,watch函数接受两个参数:

  1. 第一个参数是要侦听的目标。它可以是一个响应式引用(ref)或是响应式对象的某个属性。在您的示例中,侦听的目标是checked,它很可能是通过ref创建的一个响应式引用,用于追踪某个特定的值(在这个场景下,很可能是一个开关的状态)。

  2. 第二个参数 (xxxx) 应该是一个回调函数,当第一个参数所指向的值改变时,这个回调函数将被调用。函数通常接收两个参数:newValueoldValue,分别表示变化后的新值和变化前的旧值。在您的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函数的执行步骤:

  1. 初始状态: checked的值为false

  2. 状态变化 - 第一次改变: 如果在某个事件(例如用户点击了一个开关按钮)中我们将checked的值设置为truewatch侦听器将检测到这个变化。

    • newValue将是改变后的值true,而oldValue将是变化前的值false
    • 控制台将输出:checked从false变为true
  3. 状态变化 - 第二次改变: 如果用户再次点击开关将其关闭,我们设置checked的值回false

    • 这次,newValuefalseoldValuetrue
    • 控制台再次输出,反映这次变化: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的内部机制负责将变化之后的值和之前的值分别作为newValueoldValue传给回调函数。

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

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

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

这篇关于vue-cil的watch函数详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/687769

相关文章

C语言中的浮点数存储详解

《C语言中的浮点数存储详解》:本文主要介绍C语言中的浮点数存储详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、首先明确一个概念2、接下来,讲解C语言中浮点型数存储的规则2.1、可以将上述公式分为两部分来看2.2、问:十进制小数0.5该如何存储?2.3 浮点

大数据spark3.5安装部署之local模式详解

《大数据spark3.5安装部署之local模式详解》本文介绍了如何在本地模式下安装和配置Spark,并展示了如何使用SparkShell进行基本的数据处理操作,同时,还介绍了如何通过Spark-su... 目录下载上传解压配置jdk解压配置环境变量启动查看交互操作命令行提交应用spark,一个数据处理框架

MySQL中COALESCE函数示例详解

《MySQL中COALESCE函数示例详解》COALESCE是一个功能强大且常用的SQL函数,主要用来处理NULL值和实现灵活的值选择策略,能够使查询逻辑更清晰、简洁,:本文主要介绍MySQL中C... 目录语法示例1. 替换 NULL 值2. 用于字段默认值3. 多列优先级4. 结合聚合函数注意事项总结C

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Windows命令之tasklist命令用法详解(Windows查看进程)

《Windows命令之tasklist命令用法详解(Windows查看进程)》tasklist命令显示本地计算机或远程计算机上当前正在运行的进程列表,命令结合筛选器一起使用,可以按照我们的需求进行过滤... 目录命令帮助1、基本使用2、执行原理2.1、tasklist命令无法使用3、筛选器3.1、根据PID

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

MySql中的数据库连接池详解

《MySql中的数据库连接池详解》:本文主要介绍MySql中的数据库连接池方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql数据库连接池1、概念2、为什么会出现数据库连接池3、原理4、数据库连接池的提供商5、DataSource数据源6、DBCP7、C

Spring-AOP-ProceedingJoinPoint的使用详解

《Spring-AOP-ProceedingJoinPoint的使用详解》:本文主要介绍Spring-AOP-ProceedingJoinPoint的使用方式,具有很好的参考价值,希望对大家有所帮... 目录ProceedingJoinPoijsnt简介获取环绕通知方法的相关信息1.proceed()2.g

一文详解kafka开启kerberos认证的完整步骤

《一文详解kafka开启kerberos认证的完整步骤》这篇文章主要为大家详细介绍了kafka开启kerberos认证的完整步骤,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、kerberos安装部署二、准备机器三、Kerberos Server 安装1、配置krb5.con

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...