Vue3.0 watch和watchEffect监听器:VCA
简介
在项目中,有时候检测一个变量的值是否反升了变化。通常使用的watch或者使用低效的循环判断。 在次vue中给我们设置了深度监测数据繁盛变化的方法。
1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听; 2.immediate:true,代表watch里面声明了之后会立马执行handler里面的函数
案列
<template><div><input type="text" v-model="mytext" class="form-control"><select v-model="myselect" class="form-control"><option v-for="(item, index) in datalist" :key="item">{{ item }}</option></select></div>
</template>
<script>
import { reactive, ref, watch, watchEffect } from 'vue';
import 'bootstrap/dist/css/bootstrap.css'export default {setup() {const mytext = ref("")const myselect = ref("中国")const datalist = ref(["中国", "美国", "俄罗斯", "德国", "法国"])//-----------监听一个对象//监听mytext:写法一watch(mytext, (newValue, oldValue) => {console.log("新的值", newValue)console.log("老的值", oldValue)})//监听mytext:写法二watch(() => mytext.value, (newValue, oldValue) => {console.log("新的值", newValue)console.log("老的值", oldValue)})//监听myselect:写法二watch(() => myselect.value, (newValue, oldValue) => {console.log("新的值", newValue)console.log("老的值", oldValue)})//-----------监听多个对象//监听mytext和myselect:写法三//参数1:表示你需要监听的数据源//参数2:表示你要干什么,它是一个handler函数//参数3:表示是否立即执行一次,还是等监听的对象发生改变后再执行。watch([mytext,myselect], (newValue, oldValue) => {//--------这一块就是handler函数内容---startconsole.log("新的值", newValue)console.log("老的值", oldValue)//我们可以在这里做一些ajax请求//--------这一块就是handler函数内容---End}, { immediate: true, deep: false })//immediate:true表示组件加载后立即执行handler里面的函数。它会再setup钩子函数后,onBeforeMount钩子函数前执行//deep:false表示不做深度监听,为true表示深度监听,慎用deep:true因为当一个对象比较复杂的时候,对象里面有对象...层次太深容易带来性能和预料外的事情//1、watchEffect会在初始化的时候调用一次,相当于watch中的immediate:true//2、它不需要具体监听某个数据源发生变化,只要它里面用到对象数据发生变化就会立马执行一次watchEffect:比如如下代码它里面用到了两个对象数据,如:1、mytext 2、myselect//3、VCA中才有watchEffect,VOA中没有watchEffectwatchEffect(() => {console.log(mytext.value); //只要mytext值发生改变就立即执行watchEffectconsole.log(myselect.value); //只要myselect值发生改变就立即执行watchEffectconsole.log("我被执行了");})return {mytext,myselect,datalist}}
}
</script>
相关文章:
Vue3.0 watch和watchEffect监听器:VCA
简介 在项目中,有时候检测一个变量的值是否反升了变化。通常使用的watch或者使用低效的循环判断。 在次vue中给我们设置了深度监测数据繁盛变化的方法。 1.vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听; 2.immediate:true,代表watch里面声明了…...
1360. 日期之间隔几天
1360. 日期之间隔几天 Java代码: 【DateFormat】DateFormat用于实现日期的格式化 import java.text.DateFormat; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; // 好像已过时class Solution {public int daysBet…...
ubuntu配置 Conda 更改默认环境路径
我的需求是以后凡是新建一个虚拟环境都需要安装在一个挂载了大容量的分区/data里面 /home里面的是即将爆满但是还能塞点东西的硬盘. 如果您想要永久更改 Conda 的默认环境路径,可以编辑 Conda 的配置文件。首先,找到 Conda 的配置文件通常是 .condarc 文…...
华山编程培训中心——工业相机飞拍
飞拍功能是一种高速运动图像采集技术,通过降低相机的曝光时间来拍摄快速移动的对象,以提高工作效率和加快生产速度。下面视频演示工业相机飞拍: 上位机控制工业相机飞拍演示 一. 飞拍对相机硬件的要求 全局快门相机:飞拍要求相机…...
linux 释放缓存命令并做成定时任务
这个命令组合可以实现将待写入的数据同步到磁盘中,然后释放页面缓存。具体命令为: sync; echo 1 > /proc/sys/vm/drop_caches 第一个命令 sync 是将所有待写入磁盘的数据刷新到磁盘中,确保数据写入完成。第二个命令 echo 1 > /proc/…...
求解一个整数中含多少个1
1.问题描述:给定一个整数,统计其对应的二进制中含有1的个数。比如8(0000 1000),对应的二进制数中,只含有一个1. 2.设计思路:对x取余:zx%2。如果z!0,说明x的末尾不是为1.对于一个二进制x4x3x2x1…...
js编写一个函数判断所有数据类型
一、typeof 在 JavaScript 里使用 typeof 来判断数据类型,只能区分基本类型,即 “number”,”string”,”undefined”,”boolean”,”object” 五种。 对于数组、对象来说,其关系错综复杂&…...
Python对于时间相关模块的学习记录(time,datetime等模块)
1,time.time() 获得从计算机开始出生到现在的秒数(也成时间戳),可以时间相减计算流逝时间 说明 :擅长时间相减计算流逝时间 导入方法 import time import time# 1,time.time 获得从计算机开始出生到…...
【C#】获得所有可见窗口信息
【背景】 由于自己的瘦客户端上的Windows自带截图软件功能被阉割,所以自己写了一个,其中有窗口截图功能,涉及到获得所有可见窗口的信息。 【代码】 public WindowInfo[] GetAllDesktopWindows(){//用来保存窗口对象 列表List<WindowInf…...
ffmpeg的基本功能介绍
之前对ffmpeg有一个模糊的印象,后来经过一些项目对ffmpeg有了深入的认识,这里总结下。 最开始对ffmpeg的印象是可以对视频进行一些处理操作,但是做哪些操作又不是很清楚,知其然不知其所以然。下面对于ffmpeg的功能进行一个总结&a…...
QECon大会亮相产品,支持UI自动化测试?RunnerGo
最近在gitee上看见一款获得GVP(最有价值开源项目)的测试平台RunnerGo,看他们官网介绍包含了接口测试、性能测试、自动化测试。知道他们有saas版可以试用,果断使用了一下,对其中场景管理和性能测试印象深刻,…...
Linux开关机相关的命令解析
前言 Linux直接拔电源关机 ,内存中的东西还没保存到硬盘。所以有时候会导致数据丢失或者有些服务起不来。所以最好直接命令行关机就像windows电脑需要界面关机一样。而不是强制拔电源 关机命令 halt halt:关机但是不关闭电源,需要手动关闭电源(加p参数会关闭电源),不…...
C++二分查找算法的应用:俄罗斯套娃信封问题
本文涉及的基础知识点 二分查找 题目 给你一个二维整数数组 envelopes ,其中 envelopes[i] [wi, hi] ,表示第 i 个信封的宽度和高度。 当另一个信封的宽度和高度都比这个信封大的时候,这个信封就可以放进另一个信封里,如同俄罗…...
redis如何保证和mysql数据的一致性
Redis和MySQL是两种不同的数据库系统,它们在数据一致性方面有不同的特点和应用场景。保证Redis和MySQL数据的一致性通常需要考虑以下几个方面: 双写策略: 一种常见的方法是采用双写策略,即将更新操作同时写入Redis和MySQL。这确保…...
SpringBoot整合Redisson,赶紧整起来!
SpringBoot整合Redisson 一、Redisson 是什么?二、使用场景三、使用步骤1.引入相关依赖2.application.yml配置3.创建RedissonConfig4.开始使用 总结 提示:以下是本篇文章正文内容 一、Redisson 是什么? Redisson是一个基于Java的开源的、高…...
测试Whisper效果
先去官方上面看看,是否有对应的测试结果 简单找了一下,没找到对应的测试数据 去hugging face 上面找对应的数据集,发现没有现成的数据 找到了几个数据集,但是是收费的 101 Hours – Scene Noise Data by Voice Recorder 1,29…...
Seata 四种事务模式
Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务。Seata 将为用户提供了 AT、TCC、SAGA 和 XA 事务模式,为用户打造一站式的分布式解决方案。 全文参考文献:中文文档 TC (Transaction Coordinator) - 事务…...
超好用的IDEA插件推荐,写完代码直接调试接口
Apipost推出IDEA插件非常省时高效,写完代码直接可以进行调试,而且支持生成接口文档,真是后端神器啊! 可以点击下方链接安装更新或在插件商店中搜索安装 下载链接:https://plugins.jetbrains.com/plugin/22676-apipos…...
发送post请求、携带cookie、响应对象、高级用法
发送post请求 请求体中,两种方式:data{} ⇢ \dashrightarrow ⇢ 编码格式 urlencoded ⇢ \dashrightarrow ⇢ keyvalue&keyvaluejson{} ⇢ \dashrightarrow ⇢ 编码格式是json 使用方式: resrequests.post(url) 模拟登录 import …...
JMeter接口测试性能测试
目前最新版本发展到5.0版本,需要Java7以上版本环境,下载解压目录后,进入\apache-jmeter-5.0\bin\,双击ApacheJMeter.jar文件启动JMemter。 1、创建测试任务 添加线程组,右击测试计划,在快捷菜单单击添加-…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
大数据学习栈记——Neo4j的安装与使用
本文介绍图数据库Neofj的安装与使用,操作系统:Ubuntu24.04,Neofj版本:2025.04.0。 Apt安装 Neofj可以进行官网安装:Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练
前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1):从基础到实战的深度解析-CSDN博客,但实际面试中,企业更关注候选人对复杂场景的应对能力(如多设备并发扫描、低功耗与高发现率的平衡)和前沿技术的…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
