Vue.js前端框架教程11:Vue监听器watch和watchEffect

news/2024/12/23 5:12:04/

文章目录

        • 监听器(watchers)
          • 基本用法
          • deep: true
          • immediate: true
          • 总结
        • watchEffect
          • 基本用法
          • 自动追踪依赖
          • 停止监听
          • 与 `watch` 的对比
          • 性能优化
          • 总结

监听器(watchers)

Vue 中,监听器(watchers)是一种观察和响应 Vue 实例上的数据变动的机制。Vue 提供了 watch 属性,允许我们执行副作用的函数,并且可以精确控制它们应该在何时运行。watch 可以监听 Vue 实例上的数据,或者任何 getter 函数。

基本用法

watch 的基本用法如下:

javascript">export default {data() {return {watchedProperty: ''};},watch: {// 监听 data 中的属性watchedProperty(newValue, oldValue) {// 在这里执行操作,当 watchedProperty 发生变化时}}
};

或者使用 Vue 3Composition API

javascript">import { watch, ref } from 'vue';export default {setup() {const watchedProperty = ref('');watch(watchedProperty, (newValue, oldValue) => {// 在这里执行操作,当 watchedProperty 发生变化时});return {watchedProperty};}
};
deep: true

deep: truewatch 选项的一个参数,用于指定是否进行深度监听。深度监听意味着 Vue 会监听对象内部属性的变化,而不仅仅是对象本身的引用变化。

javascript">export default {data() {return {someObject: {nestedProperty: ''}};},watch: {// 深度监听 someObject 对象someObject: {handler(newValue, oldValue) {// 当 someObject 或其内部属性发生变化时,这个函数会被调用},deep: true}}
};
immediate: true

immediate: true 也是 watch 选项的一个参数,用于指定是否在监听器被创建之后立即以当前的值触发回调函数。

javascript">export default {data() {return {immediateProperty: ''};},watch: {// 立即执行,并且监听 immediateProperty 的变化immediateProperty: {handler(newValue, oldValue) {// 当 immediateProperty 发生变化时,这个函数会被调用},immediate: true}}
};

在上面的例子中,当组件实例化后,immediateProperty 的监听器会立即执行一次,即使 immediateProperty 还没有发生变化。

总结
  • 基本监听:用于监听数据的变化,并在变化时执行回调函数。
  • deep: true:用于深度监听一个对象,以便能够检测到对象内部属性的变化。
  • immediate: true:用于在监听器被创建时立即执行回调函数,无论监听的值是否已经变化。

这些监听选项使得 Vue 的响应式系统更加灵活和强大,允许开发者根据具体需求来精确控制数据变化时的行为。

watchEffect

Vue 3 中,watchEffect 是一个强大的响应式 API,它用于自动追踪其内部依赖的响应式数据变化,并在数据变化时执行相应的副作用。以下是 watchEffect 的一些关键特性和用法:

基本用法

watchEffect 接受一个函数作为参数,这个函数会在 watchEffect 被创建时立即执行一次,之后每当其依赖的响应式状态发生变化时,都会重新执行。

javascript">import { ref, watchEffect } from 'vue';const count = ref(0);watchEffect(() => {console.log(`count is now: ${count.value}`);
});

在这个例子中,每当 count 的值发生变化时,控制台都会打印出新的 count 值。

自动追踪依赖

watch 不同,watchEffect 不需要明确指定要监听的目标,而是会根据回调函数中访问的响应式数据自动追踪依赖。

停止监听

watchEffect 返回一个停止函数,调用这个函数可以手动停止监听,这有助于避免内存泄漏。

javascript">const stop = watchEffect(() => {// ...
});// 停止监听
stop();
watch 的对比
  • 依赖声明watch 需要显式指定要监听的响应式数据,而 watchEffect 自动追踪内部访问的响应式数据。
  • 回调参数watch 提供新值 (newVal) 和旧值 (oldVal),而 watchEffect 无法直接访问变化前后的值。
  • 立即执行watch 默认不立即执行(可通过 immediate 选项控制),而 watchEffect 默认立即执行。
  • 适用场景watch 适合特定数据变化时执行操作,watchEffect 适合简单逻辑的响应式副作用处理。
性能优化

watchEffect 由于其自动追踪依赖的特性,可以减少冗余的代码,使得副作用的处理更加简洁。但在某些情况下,如果回调函数中的操作非常昂贵,可能会影响性能,因此需要合理使用。

总结

watchEffectVue 3 中用于响应式监听的一个新的工具,它提供了一种更简洁、更自动化的方式来处理响应式数据变化的副作用。通过自动追踪依赖和立即执行的机制,watchEffect 使得开发者可以更专注于业务逻辑的实现,而不需要关心依赖的声明和变化检测的细节。


http://www.ppmy.cn/news/1557379.html

相关文章

Maven简要使用说明:在IDEA中创建一个基于POI的处理Excel文件的简单Java Maven项目...

目录 Maven简介(此部分内容为AI生成)零、下载Maven一、Maven相关系统环境变量设置二、设置Maven的本地JAR仓库位置三、设置Maven配置文件settings.xml 3.1 配置本地仓库3.2 配置镜像仓库URL3.3 配置JDK版本四、在IDEA中配置maven并创建maven项目 4.1 设置IDEA的全局配置4.2 在I…

【网络安全】用 Frida 修改软件为你所用

用 Frida 修改软件为你所用 Frida是一个强大的设备操作工具,它允许我们分析、修改和与运行中的应用程序交互。Frida通过在目标进程中创建一个线程,并通过这个线程执行一些启动代码来实现交互功能。这种交互被称为“代理”,它允许我们添加Jav…

uniapp 图片上传功能以及给图片添加水印

完整图片上传封装代码&#xff1a; <template><view class"add-photo"><view class"tips" v-if"title"><text class"require" v-if"require">*</text><text>{{ title }}</text>…

【libuv】Fargo信令1:client发connect消息给到server

tcp 单机测试,进行模拟 (借助copilot实现) 【Fargo】28:字节序列client发connect消息给到serverserver 收到后回复ack给到客户端程序借助copilot实现。项目构建 Console依赖于Halo.dll提供的api,Halo 依赖于 Immanuel, 运行效果 遗留问题 客户端似乎么有逻辑收到ack做处理各…

数据结构_平衡二叉树

结点类 构造函数分为有参和无参&#xff0c;相同点都是初始化树高为1 class Node { public:int data; // 用于输出int val; // 数据域&#xff0c;用于排序int height; // 树高Node* left;Node* right;Node();Node(int v, int d);static int max(int a, int b); };Node::N…

姓名详批API接口_解析姓名构成与命理特征返回json数据

姓名详批 API 接口介绍 引言 姓名在中国文化中不仅是个人的代号&#xff0c;更承载着丰富的文化内涵和命理学意义。通过分析姓名的构成&#xff0c;可以揭示个人的性格特征、运势发展及潜在的命理影响。本文将介绍一个姓名详批的 API 接口&#xff0c;提供如何通过该接口获取…

【MFC】如何修改多文档视图的标签

新建工程同之前的几篇博客 新建一个调用菜单&#xff0c;并实现其内容 以下代码演示创建时设置标题&#xff0c;并保存到子框架中 #include "MFCApplication9Doc.h" #include "MFCApplication9View.h" void CMainFrame::On32771() {CMFCApplication9Doc*…

PC寄存器(Program Counter Register)jvm

在JVM(Java虚拟机)中,PC寄存器(Program Counter Register)扮演着至关重要的角色。以下是对JVM中PC寄存器的详细解释: 一、定义与功能 定义: JVM中的PC寄存器,也被称为程序计数器,是对物理PC寄存器的一种抽象模拟。它用于存储当前线程所执行的字节码指令的地址,即指…