watch与watchEffect的区别

watch与watchEffect的区别
给大家打一个比喻

watch:教导主任叫老师看张三和李四是否在睡觉
watchEffect:教导主任叫老师看班上有谁在睡觉,在睡觉的就报告

1.都能监听响应式数据的变化,不同的是监听数据变化的方式不同
2.watch:要明确指出监视的数据

<template><div>{{ sum1 }}</div><div>{{ sum2 }}</div><button @click="changeSum1">sum1+1</button><button @click="changeSum2">sum2+1</button>
</template>
<script lang="ts" setup>
import { watch, ref } from "vue"
let sum1 = ref(0)
let sum2 = ref(1)
function changeSum1() {sum1.value += 1
}
function changeSum2() {sum2.value += 1
}
// 我们使用watch时需要指定监视的数据
watch([sum1, sum2], (newVal, oldVal) => {console.log(newVal, oldVal);
})
</script>
<style scoped></style>

3.watchEffect:不用明确的指出监视的数据(函数中用到哪些属性,就监视哪些属性)

<template><div>{{ sum1 }}</div><div>{{ sum2 }}</div><button @click="changeSum1">sum1+1</button><button @click="changeSum2">sum2+1</button>
</template>
<script lang="ts" setup>
import { watchEffect, ref } from "vue"
let sum1 = ref(0)
let sum2 = ref(1)
function changeSum1() {sum1.value += 1
}
function changeSum2() {sum2.value += 1
}
// 我们使用watchEffect时不需要指定监听的数据
watchEffect(() => {console.log(sum1.value, sum2.value);
})
</script>
<style scoped></style>

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

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

相关文章

Parallels Desktop for Mac 19.4.0 (build 54570) - 在 Mac 上运行 Windows

Parallels Desktop for Mac 19.4.0 (build 54570) - 在 Mac 上运行 Windows Parallels Desktop 19 请访问原文链接&#xff1a;Parallels Desktop for Mac 19.4.0 (build 54570) - 在 Mac 上运行 Windows&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者…

Linux 基本指令2

cp 指令 cp[选项]源文件 目标文件 将源文件的内容复制到目标文件中&#xff0c;源文件可以有多个&#xff0c;最后一个文件为目标文件&#xff0c;目标文件也可以是一段路径&#xff0c;若目的地不是一个目录的话会拷贝失败。若没有路径上的目录则会新建一个&#xff0c;若源是…

特殊医学用途配方食品注册数据库

在这个追求健康的时代&#xff0c;特殊医学用途配方食品&#xff08;简称特医食品&#xff09;已成为众多特殊需求人群的膳食选择。它们不仅满足了特定疾病状态下的营养需求&#xff0c;更是病患康复之路上的重要伴侣。然而&#xff0c;面对市场上琳琅满目的特医食品&#xff0…

只要往前走,至少能到达自己所能做到的部分

很多说自己力不足的人&#xff0c;往往是中道而废&#xff0c;在通往目标的途中就失败了。 无论怎么力不足&#xff0c;只要往前走&#xff0c;至少也能到达自己所能做到的部分。 《刻意练习》有个原则&#xff1a;如果有人能做到一件事&#xff0c;其他人就都能做到。 &…

云原生周刊:Kubernetes 十周年 | 2024.6.11

开源项目推荐 Kubernetes Goat Kubernetes Goat 是一个故意设计成有漏洞的 Kubernetes 集群环境&#xff0c;旨在通过交互式实践场地来学习并练习 Kubernetes 安全性。 kube-state-metrics (KSM) kube-state-metrics 是一个用于收集 Kubernetes 集群状态信息的开源项目&…

优维运营治理三件套:可用性x性能x容量管理

对于系统/应用运维人员&#xff0c;日常工作中需要保证系统/应用的可用性、稳定性和关注系统/应用的性能表现。为了帮助IT人员更好地管理和优化企业的系统和应用&#xff0c;我们引入了三大关键能力&#xff1a;可用性管理、性能管理和容量管理。这些能力不仅能够帮助IT人员发现…

React@16.x(28)useMemo

目录 1&#xff0c;介绍和 useCallback 的区别 2&#xff0c;使用举例2.1&#xff0c;优化子组件渲染12.2&#xff0c;优化子组件渲染2 1&#xff0c;介绍 一句话总结&#xff0c;效果类似 Vue 中的 computed。常用于性能优化。 和 useCallback 的区别 使用上没有区别&#…

【ai】blender4.1 安装插件

开源软件,所以资料充足插件及配置 下载插件插件是python开发的 编辑中的偏好设置 点击选中 点击一键切换中文英文 切换主题 插件源码

Android RecyclerView使用

1.导入依赖 implementation com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.35 2.写一个Layout布局装载RecyclerView <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.android.com/apk/res/…

mysql_ssl_rsa_setup使用详解

mysql_ssl_rsa_setup 是一个MySQL附带的工具&#xff0c;用于自动创建SSL证书和密钥文件&#xff0c;以便在MySQL服务器与客户端之间启用安全的SSL/TLS连接。这对于确保数据传输的安全性是非常重要的&#xff0c;尤其是在不安全的网络环境中。下面是对mysql_ssl_rsa_setup使用的…

AI绘画SD下载安装教程,学习AI绘画软件必看(SD怎么安装,SD安装教程,安装stable diffusion软件必看)

大家好&#xff0c;我是设计师阿威 最近很火很有趋势的便是AI人工智能了&#xff0c;提到AI大家肯定都不陌生&#xff08;AIGC&#xff09;大家也很熟知&#xff0c;但是要问应用的工具有哪些肯定很多人说不出来几个&#xff0c;但是比较厉害的就是大众所认识的SD-stable diff…

Kafka使用教程和案例详解

Kafka 使用教程和案例详解 Kafka 使用教程和案例详解1. Kafka 基本概念1.1 Kafka 是什么?1.2 核心组件2. Kafka 安装与配置2.1 安装 Kafka使用包管理器(如 yum)安装使用 Docker 安装2.2 配置 Kafka2.3 启动 Kafka3. Kafka 使用教程3.1 创建主题3.2 生产消息3.3 消费消息3.4 …

Java 异常处理 -- Java 语言的异常、异常链与断言

大家好,我是栗筝i,这篇文章是我的 “栗筝i 的 Java 技术栈” 专栏的第 009 篇文章,在 “栗筝i 的 Java 技术栈” 这个专栏中我会持续为大家更新 Java 技术相关全套技术栈内容。专栏的主要目标是已经有一定 Java 开发经验,并希望进一步完善自己对整个 Java 技术体系来充实自…

Android 汉字转拼音(两行就够了)

在Android中&#xff0c;我们可以使用Android自带的Transliterator类来实现汉字转拼音的功能。下面是使用Transliterator类的示例代码&#xff1a; 在你的Activity或者工具类中&#xff0c;使用以下代码来实现汉字转拼音的功能&#xff1a; import android.support.v7.app.Ap…

力扣每日一题 6/14 动态规划+数组

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 2786.访问数组中的位置使分数最大【中等】 题目&#xff1a; 给你一个下标…

JavaSE---类和对象(上)

1. 面向对象的初步认知 1.1 什么是面向对象 Java是一门纯面向对象的语言(Object Oriented Program&#xff0c;简称OOP)&#xff0c;在面向对象的世界里&#xff0c;一切皆为对象。 面向对象是解决问题的一种思想&#xff0c;主要依靠对象之间的交互完成一件事情。用面向对象…

如何用R语言ggplot2画高水平期刊散点图

文章目录 前言一、数据集二、ggplot2画图1、全部代码2、细节拆分1&#xff09;导包2&#xff09;创建图形对象3&#xff09;主题设置4&#xff09;轴设置5&#xff09;图例设置6&#xff09;散点颜色7&#xff09;保存图片 前言 一、数据集 数据下载链接见文章顶部 处理前的数据…

搭建 Tomcat 集群【Nginx 负载均衡】

当我们想要提高后端服务器的并发性能&#xff0c;可以通过分配更多的资源给 Tomcat 服务器&#xff0c;但是这只能提高一部分的性能。因为每台 Tomcat 的服务器是有最大连接数为 200.所以即可拥有无穷无尽的内存&#xff0c;也会因为单台 Tomcat 的原因而无法发挥这些资源的最大…

grpc代理服务的实现(二)

目录 grpc service 的实现grpc服务通过unix域监听请求建立与代理服务的tcp连接请求转发到 unix 上代码地址 grpc service 的实现 假设 grpc service 的服务名是 Bar grpc服务通过unix域监听请求 go svr : grpc.NewServer() messages.RegisterBarServer(svr, bar.New()) reflec…

免杀笔记 ----> 后续更新安排

前一段时间&#xff0c;我疯狂更新了内网&#xff0c;本来想把NTLM-Relay给更上的&#xff0c;但是计划安排不允许了&#xff0c;之后后续再给大家进行深入的内网更新了&#xff01;&#xff01; &#xff1a;&#xff1a; 真不是我托更 嘻嘻嘻~~~ 说回正题&#xff0c;接下来…