vue3里的watch与 watchEffect

watchEffect特点:

  1. 回调函数立即调用

  2. 回调函数依赖的数据都会被监控

  3. 深度监控

watch与 watchEffect

  1. 相同点 都可以对数据进行侦听

  2. 不同点 watchEffect回调函数立即调用、对回调函数依赖的数据隐式监控、默认深度监控

  3. watch 和 watchEffect 都能监听响应式数据的变化,不同的是它们监听数据变化的方式不同。

  4. watch 会明确监听某一个响应数据,而 watchEffect 则是隐式的监听回调函数中响应数据。

  5. watch 在响应数据初始化时是不会执行回调函数的,watchEffect 在响应数据初始化时就会立即执行回调函数。

 

<template><div><!-- 情况一:监视ref定义基本数据类型的响应式数据 --><h2 ref="qyz">{{ sum }}</h2><button @click="sumadd">sum++</button></div>
</template>
<script setup>
import { ref, reactive, computed, watch, watchEffect,watchPostEffect } from 'vue'
let sum = ref(0)
let qyz = ref(null)
const sumadd = () => {sum.value++
}
watchEffect((onInvalidate) => {//watch是在第三个函数,而watchEffect是在第一个console.log('DOM节点:', qyz.value.innerHTML)console.log(sum.value)console.log('青阳子')onInvalidate(() => {console.log(2222)})},{ flush: 'post' }
)</script>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/648220.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

星环科技基于第五代英特尔®至强®可扩展处理器的分布式向量数据库解决方案重磅发布

12月15日&#xff0c;2023 英特尔新品发布会暨 AI 技术创新派对上&#xff0c;星环科技基于第五代英特尔至强可扩展处理器的Transwarp Hippo分布式向量数据库解决方案重磅发布。该方案利用第五代英特尔至强可扩展处理器带来的强大算力&#xff0c;实现了约 2 倍的代际性能提升&…

【算法专题】动态规划之子数组和子串系列

动态规划4.0 动态规划 - - - 子数组、子串系列&#xff08;数组中连续的一段&#xff09;1. 最大子数组和2. 环形子数组的最大和3. 乘积最大子数组4. 乘积为正数的最长子数组长度5. 等差数列划分6. 最长湍流子数组7. 单词拆分8. 环绕字符串中唯一的子字符串 动态规划 - - - 子数…

2024-01-25(ElasticSearch)

附上&#xff1a;ElasticSearch从入门到精通&#xff0c;史上最全&#xff08;持续更新&#xff0c;未完待续&#xff0c;每天一点点&#xff09;_elasticsearch从入门到精通,史上最全-CSDN博客 1.ES中存储不是重要的&#xff0c;搜索查询功能才是ES的核心 2.ES提供了基于JSO…

如何在外远程访问家中本地威联通QNAP NAS

文章目录 前言1. 威联通安装cpolar内网穿透2. 内网穿透2.1 创建隧道2.2 测试公网远程访问 3. 配置固定二级子域名3.1 保留二级子域名3.2 配置二级子域名 4. 使用固定二级子域名远程访问 前言 购入威联通NAS后&#xff0c;很多用户对于如何在外在公网环境下的远程访问威联通NAS…

【Python爬虫入门到精通】小白也能看懂的知识要点与学习路线

文章目录 1. 写在前面2. 爬虫行业情况3. 学习路线 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感兴趣的朋友可以关…

记一次 .NET某工控自动化系统 崩溃分析

一&#xff1a;背景 1. 讲故事 前些天微信上有位朋友找到我&#xff0c;说他的程序偶发崩溃&#xff0c;分析了个把星期也没找到问题&#xff0c;耗费了不少人力物力&#xff0c;让我能不能帮他看一下&#xff0c;给我申请了经费&#xff0c;哈哈&#xff0c;遇到这样的朋友就…

Python之数据可视化基础

目录 一 JSON数据格式转换 二 pyecharts模块 三 Pyecharts入门 四 数据可视化之疫情折线图 一 JSON数据格式转换 什么是JSON? JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式。它以易于阅读和编写的方式来表示结构化数据。JSO…

机器学习的精髓-梯度下降算法

目 1. 梯度下降算法2. 梯度下降求解3. 总结 1. 梯度下降算法 梯度下降算法是一种优化算法&#xff0c;用于最小化函数的数值方法。它通过沿着函数梯度的反方向来更新参数&#xff0c;以逐步减小函数值。这一过程重复进行直到达到收敛条件。梯度下降算法有多种变体&#xff0c;…

利用Maven获取jar包

我有一个习惯&#xff0c;就是程序不在线依赖网络的任何包。以前用C#时候虽然用Nuget找包&#xff0c;但是添加引用后又马上把Nuget引用删了&#xff0c;再把Nuget下载的dll拷贝到工程再引用dll。 这样做的好处是&#xff1a; 1.别人得到程序代码可以直接编译&#xff0c;不用…

《WebKit 技术内幕》学习之十四(2):调式机制

2 实践——基础和性能调试 Chromium开发者工具基本上沿用了Web Inspector的功能&#xff0c;所以这一节主要以该开发者工具作为介绍的对象&#xff0c;一起了解开发者工具提供的功能和一些基本的用法&#xff0c;有些用法其实在之前已经介绍过&#xff0c;这里可能为了系统性考…

数据类型(下)

数据类型&#xff08;下&#xff09; 1.集合&#xff08;set&#xff09;1.1 定义1.2 独有功能1.3 公共功能1.4 转换1.5 其他1.5.1 集合的存储原理1.5.2 元素必须可哈希1.5.3 查找速度特别快1.5.4 对比和嵌套 练习题 强插&#xff1a;None类型2.字典&#xff08;dict)2.1 定义2…

银行数据仓库体系实践(6)--调度系统

调度系统是数据仓库的重要组成部分&#xff0c;也是每个银行或公司一个基础软件或服务&#xff0c;需要在全行或全公司层面进行规划&#xff0c;在全行层面统一调度工具和规范&#xff0c;由于数据类系统调度作业较多&#xff0c;交易类系统批量优先级高&#xff0c;为不互相影…

基于ssm+vue在线考试系统

摘要 在线考试系统是一种利用现代技术手段实现的教育评估工具&#xff0c;它为学生提供了更灵活、便捷的考试方式&#xff0c;同时为教育机构提供了高效管理和评估学生学业水平的手段。在这个背景下&#xff0c;基于SSM&#xff08;SpringSpringMVCMyBatis&#xff09;框架和Vu…

【OCC学习23】使用Draw探索OCC API 【完结】

对于OCC应用开发者来说&#xff0c;OCC的文档虽然不错&#xff0c;但针对具体的需求找到合适的API还是得不断摸索。我发现看Draw的代码是探索OCC API使用的最佳路径。掌握根据Draw命令查找对应代码就能高效找到解决方案。所以这是本系列的最后一篇分享了&#xff0c;个人感觉OC…

重塑网络安全格局:零信任安全架构的崛起与革新

零信任安全架构是一种现代安全模式&#xff0c;其设计原则是“绝不信任&#xff0c;始终验证”。它要求所有设备和用户&#xff0c;无论他们是在组织网络内部还是外部&#xff0c;都必须经过身份验证、授权和定期验证&#xff0c;才能被授予访问权限。简而言之&#xff0c;“零…

Dockerfile里ADD * 保留原来的目录结构

1、问题 给新模块写Dockerfile&#xff0c;很多静态资源分散在各个目录&#xff0c;于是Dockerfile里我直接一句&#xff1a; ADD ./* /dest/镜像出来后&#xff0c;启动容器&#xff0c;进入容器种后发现&#xff1a;文件拷贝成功&#xff0c;但原来的目录结构都不在了&…

【网站项目】基于SSM的251国外摇滚乐队交流和周边售卖系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

五大自然语言处理技术里程碑浅析

自然语言处理的发展 随着深度学习和大数据技术的进步&#xff0c;自然语言处理取得了显著的进步。人们正在研究如何使计算机更好地理解和生成人类语言&#xff0c;以及如何应用NLP技术改善搜索引擎、语音助手、机器翻译等领域。 而自然语言处理的研究与业界发展中具有五大里程碑…

用javadoc生成springboot的文档

概述&#xff1a;生成 Spring Boot 项目的 JavaDoc 文档与生成普通的 Java 项目类似。 目录 第一步&#xff1a;创建一个springboot项目 第二步&#xff1a;编写pom文件 第三步&#xff1a;运行 Maven 命令生成 JavaDoc 第四步&#xff1a;查看结果 第一步&#xff1a;创建…

AG32VF407 AGRV2K 串口printf调试输出

视频讲解 [AG32VF407]国产MCUFPGA 串口printf调试输出及演示 原理图 测试代码 新建一个platformio工程&#xff0c;复制如下文件到测试工程目录下 E:\tech\AGM-AG32VF\sdk-release\AgRV_pio\platforms\AgRV\boards\agrv2k_407\board.asf E:\tech\AGM-AG32VF\sdk-release\AgRV_…