vue3中的watch

news/2024/10/17 17:29:01/

在Vue3中,watch中的参数可以分为两部分,即要监听的响应式数据以及回调函数。

语法格式如下:


watch(要监听的响应式数据, 回调函数)

除了以上的两个还有其他的参数

  • immediate:是否在初始化时立即执行一次回调函数,默认为false
  • deep:是否深度观察对象或数组的变化,默认为false
  • flush:在触发回调函数之前进行何种操作,默认为"pre"。可选值有:"pre"(立即更新DOM)、"post"(延迟到队列中的所有回调函数执行完毕后再更新DOM)和"sync"(在变更时同步应用更改)。
  • onTrigger:在触发回调函数之前执行的函数。
  • onStop:当停止观察时执行的函数。
  • lazy:是否初始不触发回调函数,默认为false

参数说明:

  • 要监听的响应式数据:可以是一个ref对象、reactive对象或者计算属性等
  • 回调函数:当被监听的响应式数据发生变化时,回调函数会被调用,可以接受到被监听的数据的新值和旧值

示例代码:


import { reactive, watch } from 'vue'
const state = reactive({count: 0
})
watch(() => state.count, (newValue, oldValue) => {console.log('count发生变化:', newValue, oldValue)
})
state.count++ // count发生变化: 1 0import { watch, ref, reactive } from 'vue';
// 观察一个响应式对象
const state = reactive({name: 'John',age: 25,
});
watch(() => state.name, (newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);
});
// 观察一个ref
const count = ref(0);
watch(() => count.value, (newValue, oldValue) => {console.log(`Count changed from ${oldValue} to ${newValue}`);
});
// 观察一个函数
watch(() => {return state.age * count.value;},(newValue, oldValue) => {console.log(`Computed value changed from ${oldValue} to ${newValue}`);}
);
// 监听多个数据源
watch([() => state.name, () => count.value], ([newName, newCount], [oldName, oldCount]) => {console.log(`Name changed from ${oldName} to ${newName}`);console.log(`Count changed from ${oldCount} to ${newCount}`);
});
// 配置项示例
watch(() => state.name,(newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);},{ immediate: true } // 立即执行回调函数
);
值得注意的是,在Vue3中,watch函数返回一个stop函数,用于停止侦听。你可以使用stop函数来停止之前注册的watch:const stopWatcher = watch(() => state.name, (newValue, oldValue) => {console.log(`Name changed from ${oldValue} to ${newValue}`);
});
// 停止监听
stopWatcher();

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

相关文章

容器网络之Flannel

​ 第一个问题位置变化,往往是通过一个称为注册中心的地方统一管理的,这个是应用自己做的。当一个应用启动的时候,将自己所在环境的 IP 地址和端口,注册到注册中心指挥部,这样其他的应用请求它的时候,到指挥…

背诵不等于理解,深度解析大模型背后的知识储存与提取

自然语言模型的背诵 (memorization) 并不等于理解。即使模型能完整记住所有数据,也可能无法通过微调 (finetune) 提取这些知识,无法回答简单的问题。 随着模型规模的增大,人们开始探索大模型是如何掌握大量知识的。一种观点认为这归功于 “无…

【论文阅读】DiffusionDet: Diffusion Model for Object Detection

原文链接:https://arxiv.org/abs/2211.09788 1. 引言 过去的目标检测方法依赖手工设计的候选对象(如滑动窗口、区域提案、锚框和参考点);或是依赖可学习的物体查询。   本文使用更加简单的方法,随机初始化边界框&am…

桂院校园导航 | 云上高校导航 云开发项目 二次开发教程 1.2

Gitee代码仓库:桂院校园导航小程序 GitHub代码仓库:GLU-Campus-Guide 演示视频 【2023广西赛区 | 三等奖】中国大学生计算机设计大赛 云上高校导航 先 假装 大伙都成功安装了云开发项目,并能在 微信开发者工具 和 手机 上正确运行。 接着就…

【MySQL】MySQL 官方安装包形式

MySQL 官方提供3种包: 1. 源码包 mysql-5.7.42.tar.gz mysql-5.7.42-aarch64.tar.gz http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.34.tar.gz http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.42.tar.gz需要用户根据自己的CPU架构选择对应的…

深度学习笔记_1、定义神经网络

1、使用了PyTorch的nn.Module类来定义神经网络模型;使用nn.Linear来创建全连接层。(CPU) import torch.nn as nn import torch.nn.functional as F from torchsummary import summary# 定义神经网络模型 class Net(nn.Module):def __init__(self):super(Net, self).__init__()…

JS defineProperty详解

defineProperty Object.defineProperty():方法会在对象上直接定义个新的属性,或者修改现有的属性,并返回此对象 let obj {} //与我们使用 obj.name zhangsna 效果一样 但是用defineProperty定义的属性无法改变 或者删除 Object.defineProperty(obj,n…

前端设计跨异步处理手段

简单描述下笔者所了解的单bit和多bit信号跨时钟域处理的常见手段。 单bit信号跨时钟域处理手段 电平信号:可以直接打拍处理;脉冲信号(原始脉宽需保持至少2个DST时钟宽度):可以直接打拍处理,对同步后脉宽不…