当前位置: 首页 > news >正文

vue3 学习笔记08 -- computed 和 watch

vue3 学习笔记08 – computed 和 watch

computed

computed 是 Vue 3 中用于创建计算属性的重要 API,它能够根据其它响应式数据动态计算出一个新的值,并确保在依赖数据变化时自动更新。

  1. 基本用法

    squaredCount 是一个计算属性,它依赖于 count 的值,并且会在 count 变化时自动更新

    import { ref, computed } from 'vue';// 定义一个响应式数据const count = ref(1);// 定义一个计算属性const squaredCount = computed(() => count.value * count.value);console.log(squaredCount.value); // 输出:1// 修改 count,触发计算属性更新count.value = 2;console.log(squaredCount.value); // 输出:4
  2. 缓存和计算属性的惰性求值

    computed 默认会缓存计算结果,只有在它的依赖项变化时才会重新计算。这样可以确保在性能上的优化,避免不必要的计算

         import { ref, computed } from 'vue';const count = ref(1);// 定义一个计算属性,使用 getter 函数const squaredCount = computed(() => {console.log('computed squaredCount'); // 仅在首次获取或依赖变化时输出return count.value * count.value;});console.log(squaredCount.value); // 输出:1count.value = 2;console.log(squaredCount.value); // 输出:4
  3. 计算属性的 setter

    在某些情况下,可能需要通过计算属性设置值。Vue 3 允许定义计算属性的 get 和 set 方法,使其可以作为双向绑定的源。

     import { ref, computed } from 'vue';const firstName = ref('John');const lastName = ref('Doe');const fullName = computed({get: () => `${firstName.value} ${lastName.value}`,set: (value: string) => {const names = value.split(' ');firstName.value = names[0];lastName.value = names[names.length - 1];}});console.log(fullName.value); // 输出:John DoefullName.value = 'Jane Smith';console.log(firstName.value); // 输出:Janeconsole.log(lastName.value); // 输出:Smith
  4. 在 Vue 组件中使用

    在 Vue 组件中,可以将计算属性直接用于模板中,而不需要额外的 .value 访问方式。

    <template><div><p>Count: {{ count }}</p><p>Squared Count: {{ squaredCount }}</p></div></template><script setup>import { ref, computed } from 'vue';const count = ref(1);const squaredCount = computed(() => count.value * count.value);</script>
watch

watch 函数用于监听一个响应式数据的变化,它可以用来执行一些副作用操作,比如异步请求、处理复杂逻辑或者更新状态

  1. 监听响应式数据的变化
  import { ref, watch } from 'vue';const count = ref(0);// 通过 watch 函数监听 count 的变化。每当 count 发生变化时,回调函数会被调用,同时传入新值 newValue 和旧值 oldValue。watch(count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);});
  1. 监听多个数据的变化
      import { ref, watch } from 'vue';const firstName = ref('John');const lastName = ref('Doe');watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {console.log(`Name changed from ${oldFirst} ${oldLast} to ${newFirst} ${newLast}`);});
  2. 异步处理和立即执行
  import { ref, watch } from 'vue';const count = ref(0);watch(count, async (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);// 异步操作示例try {await someAsyncOperation(newValue);} catch (error) {console.error('Async operation failed:', error);}}, { immediate: true }); // 立即执行回调函数
  1. 停止监听

    watch终止监听,只需要将watch赋值给一个变量,当达到条件调用watch赋值的那个变量就可以终止监听了

      import { ref, watch } from 'vue';const count = ref(0);const stopWatching = watch(count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);});// 停止监听stopWatching();

相关文章:

vue3 学习笔记08 -- computed 和 watch

vue3 学习笔记08 – computed 和 watch computed computed 是 Vue 3 中用于创建计算属性的重要 API&#xff0c;它能够根据其它响应式数据动态计算出一个新的值&#xff0c;并确保在依赖数据变化时自动更新。 基本用法 squaredCount 是一个计算属性&#xff0c;它依赖于 count…...

Python-PLAXIS自动化建模技术与典型岩土工程案例

有限单元法在岩土工程问题中应用非常广泛&#xff0c;很多软件都采用有限单元解法。在使用各大软件进行数值模拟建模的过程中&#xff0c;岩土工程中的各种问题&#xff08;塑性、渗流、固结、动力、稳定安全、热力TM&#xff09;&#xff0c;一步一步地搭建自己的Plaxis模型&a…...

license系统模型设计使用django models

User (用户)License (许可证)Product (产品)LicenseAssignment (许可证分配) 简单的模型定义&#xff1a; from django.db import models from django.contrib.auth.models import Userclass Product(models.Model):name models.CharField(max_length255)description model…...

【通信协议-RTCM】MSM语句(1) - 多信号GNSS观测数据消息格式

注释&#xff1a; RTCM响应消息1020为GLONASS星历信息&#xff0c;暂不介绍&#xff0c;前公司暂未研发RTCM消息类型版本的DR/RTK模块&#xff0c;DR/RTK模块仅NMEA消息类型使用 注释&#xff1a; 公司使用的多信号语句类型为MSM4&MSM7&#xff0c;也应该是运用最广泛的语句…...

vue3-vite-pinia模板

模板说明 下载 git clone https://github.com/AIxiaoHanBao/vue-template.gitmodule参数 node版本 16 UI组件库 element-plus 持久化 pinia 网络请求 axios 路由 vue-router 使用说明 权限管理目录access资源目录assets组件目录components页面目录pages网络请求目录re…...

华为HCIP Datacom H12-821 卷38

1.多选题 下面关于 BGP中的公认属性的描述&#xff0c;正确的是 A、公认必遵属性是所有BGP路由器都识别&#xff0c;且必须存在于Updata消息中心 B、BGP必须识别所有公认属性 C、公认属性分为公认必遵和可选过渡两种 D、公认任意属性是所有BGP造由器都可以识别&#xff0c…...

C语言求10进制转2进制(除2取余法)

1.思路&#xff1a;除2取余法&#xff0c;也就是说用除以2取余来将10进制数转换为二进制 2.两种代码实现&#xff0c;这里用了两&#xff0c;一个递归一个非递归。 递归是一种编程技术&#xff0c;其中一个函数直接或间接地调用自己。递归通常用于解决那些可以被分解为更小的、…...

PHP 调用淘宝详情 API 接口的方法与实践

以下是关于“PHP 调用淘宝详情 API 接口的方法与实践”的一篇文章示例&#xff1a; PHP 调用淘宝详情 API 接口的方法与实践 在当今的电商时代&#xff0c;获取淘宝商品的详情信息对于许多开发者来说是一项重要的任务。使用 PHP 语言来调用淘宝详情 API 接口&#xff0c;可以…...

风景区服务热线系统:智能化时代的旅游新选择

一、引言 1 、风景区服务热线系统的概念 风景区服务热线系统是指为游客提供实时旅游信息咨询、投诉处理、紧急救援等一系列服务的电话和网络平台。它不仅是景区与游客之间的重要沟通桥梁&#xff0c;也是提升游客满意度、优化景区管理的重要手段。 2 、智能化时代对旅游服务…...

Linux修改配置文件后无法使用命令或无法进入桌面

如果你是修改了配置文件&#xff0c;如 sudo vim /etc/profile重启无数次发现无法进入桌面&#xff0c;不要着急重装系统&#xff01;&#xff01;&#xff0c;怎么造成的怎么改就行了 以下方案需要root密码&#xff0c;忘记密码详见&#xff1a;Linux忘记root密码怎么办 一…...

安卓14中Zygote初始化流程及源码分析

文章目录 日志抓取结合日志与源码分析systemServer zygote创建时序图一般应用 zygote 创建时序图向 zygote socket 发送数据时序图 本文首发地址 https://h89.cn/archives/298.html 最新更新地址 https://gitee.com/chenjim/chenjimblog 本文主要结合日志和代码看安卓 14 中 Zy…...

等保一体机 | 什么是等保一体机?一台机器就能过等保吗?

什么是等保一体机&#xff1f; 对于中小型企业来说&#xff0c;他们在接触到等保的条件下&#xff0c;可能会觉得成本太高了&#xff0c;毕竟整改的时候&#xff0c;几台安全设备下来报价就几十w。 也许有些人会听说过等保一体机 那么什么是等保一体机呢&#xff1f; 等保一…...

【活动预告】Apache IoTDB TsFile 智慧能源应用“上会”啦!

2024 年&#xff0c;站在中国数字经济产业升级和数据要素市场化建设的时代交汇点上&#xff0c;为进一步推动全球数据库产业进步&#xff0c;由中国通信标准化协会、大数据技术标准推进委员会主办的“2024 可信数据库发展大会”将于 2024 年 7 月 16-17 日&#xff0c;在北京朝…...

【公益案例展】中国电信安全大模型——锻造安全行业能量转化的高性能引擎...

‍ 电信安全公益案例 本项目案例由电信安全投递并参与数据猿与上海大数据联盟联合推出的 #榜样的力量# 《2024中国数智产业最具社会责任感企业》榜单/奖项评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 以GPT系列为代表的大模型技术&#xff0c;展现了人工智能技术与应…...

CV07_深度学习模块之间的缝合教学(2)--维度转换

教学&#xff08;1&#xff09;&#xff1a;链接 1.1 预备知识 问题&#xff1a;假如说我们使用的模型张量是三维的&#xff0c;但是我们要缝合的模块是四维的&#xff0c;应该怎么办&#xff1f; 方法&#xff1a;pytorch中常用的函数&#xff1a;(1)view函数&#xff08;2…...

Oracle字符集修改

提示 Oracle数据库默认的字符集编码为US7ASCII&#xff0c;这个编码是不支持中文的&#xff0c;如果想要在数据库存储中文&#xff0c;就需要修改编码为ZHS16GBK或UTF-8 编码和字符集是一个意思&#xff0c;只是叫法不一样而已 前置条件 修改字符集的前提是知道我们现在用的是什…...

k8s核心操作_k8s中的存储抽象_基本概念与NFS搭建_Deployment使用NFS进行挂载---分布式云原生部署架构搭建028

然后我们继续开始看 如果我们使用容器部署,比如我们有三个节点,一个是master,一个node1 一个是node2 那么pod 中我们可以看到,容器中的 /data 等各个目录都映射了出来了,但是 如果比如上面红色的部分,有个pod,原来在node2上,最右边那个,但是这个pod宕机了 那么,k8s会在node…...

数学建模·熵权法

熵权法 一种计算评价指标之间权重的方法。熵权法是一种客观的方法&#xff0c;没有主观性&#xff0c;比较可靠。 具体定义 熵权法的核心在于计算信息熵&#xff0c;信息熵反映了一个信息的紊乱程度&#xff0c;体现了信息的可靠性 具体步骤 Step1正向化处理 将所以评价指标转…...

开放开源开先河(一)

2022年7月28日&#xff0c;以“软件定义世界 开源共筑未来”为主题的全球数字经济大会开放原子开源峰会在北京开幕&#xff0c;承办主峰会和为捐赠人进行授牌仪式的开放原子开源基金会再次进入公众视野。基金会秘书长孙文龙从汇聚全球产业链开源力量、核心链接能力、开发者分享…...

美团收银Android一面凉经(2024)

美团收银Android一面凉经(2024) 笔者作为一名双非二本毕业7年老Android, 最近面试了不少公司, 目前已告一段落, 整理一下各家的面试问题, 打算陆续发布出来, 供有缘人参考。今天给大家带来的是《美团收银Android一面凉经(2024)》。 应聘岗位: 美团餐饮PaaS平台Android开发工程师…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...