vue3 computed与watch,watchEffect比较

相同点

都是要根据一个或多个响应式数据进行监听

不同点

  • computed 如要return回来一个新的响应式值,且这个值不允许直接修改,想要修改的话可以设置set函数,在函数里面去修改所依赖的响应式数据,然后计算属性值会基于其响应式依赖被缓存
  • watch 监听一个或多个响应式数据,当数据发生变化的时候可以去做一些修改其他值执行异步操作,如发送求情,修改dom,然后watch默认是懒侦听的,也就是说刚进入页面的时候不会触发,仅在侦听源发生变化的时候才会执行回调函数,这个时候我们可以设置immediate为true,这表示在侦听器创建时立即触发回调,如果侦听源是对象,我们想做深层次侦听我们需要设置deep为true

computed

  • 接受一个getter函数,返回一个只读的响应式ref对象该ref对象通过.value暴漏getter函数的返回值
<script setup lang="ts">const a = ref('小明');const b = ref('小红');const c = computed(() => `${a.value}_${b.value}`);
</script><template>{{ c }}
</template>

这个时候页面上会显示 小明_小红
这个时候也不知道有了个什么样的需求,我想要给c赋值,如c.value = 小花
在这里插入图片描述
可以看到是不行的,因为这个时候computed返回的只是一个只读的ref,接着往下看
在这里插入图片描述

<script setup lang="ts">const a = ref('小明');const b = ref('小红');const c = computed({get() {return `${a.value}_${b.value}`;},set(val) {console.log(val);},});const changeC = () => {c.value = '小花';};
</script><template>{{ c }}<a-button @click="changeC">改变C</a-button>
</template>

这个时候点击按钮后,可以看到控制台会输出小花,这个时候你可以做一些操作比如
在这里插入图片描述
这个时候页面上就会展示
在这里插入图片描述

  • vue的计算属性会自动追踪响应式依赖,它会检测到c依赖于a,b,也就是说当a或者b改变时,c就会同时更新
  • 计算属性值会基于其响应式依赖被缓存 一个计算属性仅在其响应式依赖更新时才重新计算,这意味着ab不改变,无论访问c多少次都会立即返回先前计算的结果,而不用重复执行getter函数
  • getter不应有副作用,也就是说不要在计算属性里面去改变其他状态,不要在getter中去做异步请求以及改变dom,如果有这种需求则要到watch去操作
  • 避免直接修改计算属性值,如果想要修改计算属性的值,应该去更新它所依赖的响应式字段,也就是说我们想要改变c那么我们应该想的是如何去改变ab

watch

侦听一个或多个响应式数据源,并在数据变化时调用所给的回调函数

const x = ref(0)
const y = ref(0)// 单个 ref
watch(x, (newX) => {console.log(`x is ${newX}`)
})// getter 函数
watch(() => x.value + y.value,(sum) => {console.log(`sum of x + y is: ${sum}`)}
)// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {console.log(`x is ${newX} and y is ${newY}`)
})

如果有以下需求
在这里插入图片描述
要是用

<script setup lang="ts">const obj = reactive({count: 0,});watch(// 提供一个getter函数() => obj.count,count => {console.log('做一些操作');});
</script>

在这里插入图片描述

watchEffect

我的理解就是,比如说我们要监听一个id发生变化的时候,我们要去请求一个接口获取详情
watch的写法

const todoId = ref(1)
const data = ref(null)watch(todoId,async () => {const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()},{ immediate: true }
)

我们需要监听todoId,然后…
现在如果使用watchEffect,可以这样写

watchEffect(async () => {const response = await fetch(// 逻辑里面必须要有todoId的使用,否则todoId变化了,也不会监听`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)data.value = await response.json()
})

在这里插入图片描述

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

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

相关文章

【秋招刷题打卡】Day02-二分系列之-二分查找

Day02-二分系列之-二分查找 前言 给大家推荐一下咱们的 陪伴打卡小屋 知识星球啦&#xff0c;详细介绍 >笔试刷题陪伴小屋-打卡赢价值丰厚奖励 < ⏰小屋将在每日上午发放打卡题目&#xff0c;包括&#xff1a; 一道该算法的模版题 (主要以力扣&#xff0c;牛客&#…

基于CPWM与DPWM综合调制的光伏逆变器

1. 光伏并网逆变器矢量控制 图 1 为光伏发电系统常用的逆变器拓扑结 构,太阳能光伏电池板发电所产生的直流电能接 入光伏并网逆变器直流侧。逆变器将电能逆变, 经过滤波器与隔离升压变压器连接,最终并入电 网。其中隔离变压器低压侧漏感与LC滤波器组 成LCL滤波。为便于分析…

android | studio的UI布局和代码调试 | UI调试 (用于找到项目源码)

网上找到一个项目&#xff0c;想快速的搞懂是怎么实现的&#xff0c;搞了半天发现原来android都升级到Jetpack Compose了&#xff0c;然后去找源码挺不容易的&#xff0c;摸索中发现了这个调试的方法&#xff0c;还可以。 https://developer.android.com/studio/debug/layout-i…

谷歌Chrome浏览器排查js内存溢出

1. 打开谷歌浏览器检查台 2. 点击memory 3. 点击开始快照录制&#xff0c;时隔一会儿录一次&#xff0c;多录几次 4. 进行快照对比

Java基础入门day67

day67 订单表设计 订单表 Orders订单表oidvarchar(32)主键订单编号uidint用户编号paytypevarchar(20)非空&#xff08;cash&#xff0c;alipay&#xff0c;wei&#xff09;pricedouble订单总价 create table orders(oid varchar(32) primary key,uid int,paytype varchar(20)…

JAVA学习笔记DAY11——Java 与 Spring框架发展

文章目录 Java 与 Spring框架发展ServletJDBC微服务 Java 与 Spring框架发展 Java SE平台对标的是Qt这类框架&#xff0c;主要用于桌面端应用&#xff0c;都支持跨平台开发。 随着互联网的发展&#xff0c;Java慢慢用于B/S开发。 服务器端和网页端连接、http相关的代码可以封装…

Kotlin基础——Typeclass

高阶类型 如在Iterable新增泛型方法时 interface Iterable<T> {fun filter(p: (T) -> Boolean): Iterable<T>fun remove(p: (T) -> Boolean): Iterable<T> filter { x -> !p(x) } }对应的List、Set实现上述方法时仍需要返回具体的类型 interfac…

【C++】STL中优先级队列的使用与模拟实现

前言&#xff1a;在前面我们学习了栈和队列的使用与模拟实现&#xff0c;今天我们来进一步的学习优先级队列使用与模拟实现 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:高质量&#xff23;学习 &#x1f448; &#x1f4af;代码仓库:卫…

常见的8种排序(含代码):插入排序、冒泡排序、希尔排序、快速排序、简单选择排序、归并排序、堆排序、基数排序

时间复杂度O(n^2) 1、插入排序 (Insertion Sort) 从第一个元素开始&#xff0c;该元素可以认为已经被排序&#xff1b;取出下一个元素&#xff0c;在已经排序的元素序列中从后向前扫描&#xff1b;如果该元素&#xff08;已排序&#xff09;大于新元素&#xff0c;将该元素移到…

IPv6 address status lifetime

IPv6 地址状态转换 Address lifetime (地址生存期) 每个配置的 IPv6 单播地址都有一个生存期设置&#xff0c;该设置确定该地址在必须刷新或替换之前可以使用多长时间。某些地址设置为“永久”并且不会过期。“首选”和“有效”生存期用于指定其使用期限和可用性。 自动配置的…

vue中的状态管理

第1部分&#xff1a;引言 状态管理是应用中数据流动和变更的核心机制。在Vue应用中&#xff0c;状态管理不仅涉及到组件间的数据共享&#xff0c;还包括了数据的持久化、异步操作的处理等复杂场景。良好的状态管理策略可以提高应用的响应速度&#xff0c;降低组件间的耦合度&a…

spring使用redis作为消息订阅

redis可以用于消息订阅&#xff0c;下面一段代码实现了spring中使用redis作为消息订阅模型&#xff1a; 消息处理器&#xff1a; /*** 接口RedisMessageHandler:*/ public interface RedisMessageHandler {/*** 处理redis消息* param message redis消息* return 处理结果*/Str…

Electron录制-webm转mp4时长拉长问题

问题1 在导出视频时&#xff0c;发现最终导出视频的时长与实际录制的视频时长不一样&#xff0c;而且视频中某一帧会延迟。 猜想0 在项目中使用mp4-wasm导出mp4视频&#xff0c;同时利用canvas做一些效果&#xff0c;猜想是在canvas处理时有延迟。但是当把canvas处理效果全部…

分页查询前端对接

文章目录 添加角色修改角色当点击修改按钮后,那么就会弹出对话框,所以要设置显示为true点击修改的时候就是 要显示对话框 制作用户管理页面开发后端接口用户查询前端整合新增接口功能实现修改 添加角色 首先添加 添加表单的组件 那么总结一下 就是使用 组件 然后再使用变量接…

面试题2:从浏览器输入一个URL,到最终展示前端页面这一过程,会发生什么?

这是一个高频的面试题目。 题目答案是开放性的&#xff0c;一般以后端开发的角度回答。 当地址栏输入一个 URL 后&#xff1a; 一、首先会进行 DNS 域名解析 DNS 域名解析&#xff1a;网络上的设备都是通过 IP 地址&#xff0c;作为身份标识的。但是由于点分十进制的 IP 地址 …

Python基础入门

目录 1. 什么是Python&#xff1f; 2. 安装Python 3. Python基础语法 4. 数据结构 5. 文件操作 6. Python标准库 总结 1. 什么是Python&#xff1f; Python是一种高级编程语言&#xff0c;由Guido van Rossum于1991年发布。它以其简单易读的语法和强大的功能而闻名&…

Nominatim免费的地址解析,逆地址解析,OpenStreetMap开源地图数据【全网最全】

视频学习地址 国内的一些地址解析供应商的API都开始付费了&#xff0c;就想找个免费的地址解析和逆地址解析的应用&#xff0c;最终选择了Nominatim OpenStreetMap 文章目录 一、选型1-1、数据源1-2、地理编码引擎2-1、初尝Nominatim2-1-1、地址解析2-1-2、逆地址解析 2-2、OS…

国内外大模型生态发展报告!

很多同学只知类似Check GPT或者说对国内的一些比较了解&#xff0c;对国外的不太了解&#xff0c;所以在这总结。 1 大模型的发展 左表 名称参数特点发布时间GPT-215亿英文底模&#xff0c;开源2019年Google T5110亿多任务微调, 开源2019年GPT-3.51750亿人工反馈微调2022年M…

UFS Power Mode Change 介绍

一. UFS Power Mode Change简介 1.UFS Power Mode指的是Unipro层的Power State, 也可以称为链路(Link)上的Power Mode, 可以通过配置Unipro Attribute, 然后控制切换Unipro Power State, 当前Power Mode Change有两种触发方式&#xff1a; (1) 通过DME Power Mode Change触发…

手工清理Linux后门:深入分析与实践指南

手工清理Linux后门&#xff1a;深入分析与实践指南 后门概述 后门程序允许未授权用户绕过正常的认证过程&#xff0c;获取对系统的访问权限。攻击者可能会通过修改计划任务、开机启动脚本&#xff0c;甚至植入Rootkit来维持后门。 分析操作系统被动手脚 在清理后门之前&…