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

学会使用computed计算属性与watch监听(小白学习笔记)

news 来源：原创 2025/7/5 1:35:44

1. 使用不同方法实现姓名案例

需求: 根据data中 firstName 和 lastName 的值来动态地展示全名

1.1. 插值语法

如果只使用学过的插值语法那可以在模板中直接使用两个变量 . 但是如果需要对数据进行计算等处理就需要在插值语法里写复杂的js表达式. 这样就违背了vue风格指南中"模板中使用简单表达式"的原则.

1.2. methods 方法

如果使用学过的 methods 方法 ,那么代码如下图所示模板中的表达式看起来不复杂. 但是 vue的特性是只要数据值改变那么模板就会重新解析. 将用到该数据的所有地方重新计算展示一旦 firstName 和 lastName 中任意值发生变化所有用到fullName的地方都需要重新调用会影响性能.

methods中的函数如何拿到data中的数据? 这里methods配置项中的普通函数由vue管理其内部的this指向组件实例或vm. 又因为vm身上有data中的所有属性所以可以在methods中使用this拿到data中的两个属性值

1.3. 计算属性computed

使用计算属性可以把根据firstName 和 lastName 计算得到的结果命名为fullName 将其写成对象的形式在该对象里面配置 getter和 setter 函数分别用于读取fullName属性和设置fullName属性

str.split(delim) 方法。它通过给定的分隔符 delim 将字符串分割成一个数组。

arr.join(glue) 与 split 相反。它会在它们之间创建一串由 glue 粘合的 arr 项。

读取计算属性 fullName 即读取其内部getter函数return的返回值又因为返回值依赖其他属性值所以会通过计算得到结果并且该结果会有缓存, 只要依赖的数据即 firstName和 lastName 不变化无论fullName被使用多少次都可以直接使用缓存的值不需要重复调用. 节省性能.

该计算属性会直接放到vue实例上属性值是getter函数的返回值我们可以在vue模板中直接使用.如下图所示:

注意 getter和setter 必须写成普通函数的形式(非箭头) 这样其内部this指向的就是组件实例或Vm 方便使用实例身上的属性来进行计算.

1.4. 使用计算属性小结

(1) 什么时候使用计算属性? 要用到的属性值不存在需要依赖已有属性计算得来.

(2) 底层原理是什么? 底层借助了Object.defineproperty方法提供的getter和setter.

(3) gettr和setter函数分别在什么时候执行?

getter 执行: ① 第一次读取计算属性值的时候 ② 所依赖的数据发生变化的时候 getter会被再次调用,将新值更新到页面中.

setter 执行: 当对计算属性进行赋值时执行 (注意setter内部要引起计算时依赖的数据发生变化 )

( 依赖的数据发生了对应的改变 ---> 读取计算属性时其结果才会和赋值相同如下图所示当全名fullName被更改为张-三在set函数中将其firstName和lastName进行相应更改( 张三 ) 读取fullName时 getter函数才会返回新值张-三)

(4) 计算属性的优势: 与methods相比计算属性内部具有缓存机制(方便复用), 效率更高调试方便.

(5)计算属性的简写形式

如果fullName计算属性只会被读取而不可能被赋值(修改). 那么不需要再写成对象里面包含getter和setter的格式,只需要写成名为fullName的函数返回计算的结果即可. VUE就会将 fullName和返回的结果放在vue实例上方便读取.

2. 使用不同方法实现天气案例

需求: 点击按钮切换天气.

2.1. 使用计算属性实现

使用计算属性实现根据data中isHot的值 --> 计算出展示信息即 info的值

2.2. 使用监听属性实现

使用监听属性的两种写法 ①new vue时传入的配置项watch ②vm身上的$watch方法. 如下图所示:

当监听的 isHot属性(监听的可以是已有的data属性也可以是已有的计算属性) 值发生变化时.其内部配置的handler函数就会被调用.并且该函数可以接收监听属性改变后的新值和改变前的旧值.

注意: 监听的属性必须先存在才能举行监听.

2.3. 立即监听深度监听与 watch监听的简写形式

深度监听: 如果监听的数据指向一个对象 ,那么默认监听的是该对象的引用地址. 如果想监听对象内部的属性需要开启深度监听.

立即监听: 页面初始化时就调用handler函数(数据无需改变)

监听属性的简写形式

如果监听属性时只需要配置handler函数(无需立即调用与深度监听) 可以使用简写属性.

① watch配置项的简写

不再写成对象形式, 直接使用监听的属性名写成函数形式, 参数同样可以接收 newValue oldValue.

② vm上调用 $watch的简写

不再写成对象形式而是直接写成匿名函数.

注意: new Vue时传入的配置项里的函数都是由vue进行管理的函数都要写成普通函数(非箭头×)的形式.这样函数内部的this才会指向vue实例.

3. 计算属性与监听属性的区别

3.1. 使用监听属性实现姓名案例

需要分别监听已有属性 firstName 和 lastName的变化并且额外创建 fullName属性当监听到改变时使 fullName属性发生对应的变化.

3.2. 两者的区别

watch监听函数内部可以使用定时器实现 1s之后修改对应属性值的效果.

但是计算属性依靠return 来改变属性值所以无法使用定时器. 定时器中箭头函数的return是定时器内部的

不是 fullName函数的返回值. 所以无法使用定时器来改变计算属性的返回值

所以当需要进行异步计算的时候需要使用watch.

computed 能完成的功能 ---> watch 一定可以完成(只是没有缓存). 但是watch能完成的功能 ,computed不一定能完成( 不方便拿到newValue 和 oldValue 也不能异步操作 )

注意 : 下图中 定时器内部必须写箭头函数 因为定时器是js引擎调用的定时器内部如果是普通函数其this 指向 window. 只有写成箭头函数它没有自身的this 继承其包含上下文的this 即firstName函数的this 才能指向vm 才能拿到vm身上的firstName和lastName属性值.

以上就是计算属性computed 和监听属性watch的基础使用方法.

------------------------------文章内容整理自禹神 Vue2 前端课程------------------------------------------------------

学会使用computed计算属性与watch监听(小白学习笔记)

1. 使用不同方法实现姓名案例需求: 根据data中 firstName 和 lastName 的值来动态地展示全名 1.1. 插值语法如果只使用学过的插值语法那可以在模板中直接使用两个变量 . 但是如果需要对数据进行计算等处理就需要在插值语法里写复杂的js表达式. 这样就违背了vue风格指…...

编程日记 2025/7/5 1:35:44

atoi函数的概念和使用案例

atoi 函数是 C 语言标准库中的一个函数，它用于将字符串转换为整数。atoi 的名称是 “ASCII to integer” 的缩写。该函数定义在 <stdlib.h> 头文件中。概念 atoi 函数会从字符串的开始位置开始转换，直到遇到第一个非数字字符或遇到字符串结束符…...

编程日记 2025/7/3 17:47:27

unittest VS pytest

以下是 unittest 和 pytest 框架的对比表格： 特性unittestpytest设计理念基于类的设计，类似于 Java 的 JUnit更简洁，基于函数式编程设计，支持类和函数两种方式测试编写需要继承 unittest.TestCase 类，方法以 test_ 开…...

编程日记 2025/6/28 16:18:46

B2C API安全警示：爬虫之外，潜藏更大风险挑战

在数字化时代，B2C（Business-to-Consumer）电子商务模式已成为企业连接消费者、推动业务增长的重要桥梁。而B2C API（应用程序编程接口）作为企业与消费者之间数据交互的桥梁，其安全性更是至关重要。然而&#…...

编程日记 2025/7/2 21:31:27

大型语言模型（LLM）中的tokens是什么

大型语言模型（LLM）中的tokens是什么在大型语言模型（LLM）中，tokens是文本处理的基本单位，它可以是一个单词、一个字符、一个标点符号，或者是一个特殊的标记。以下是关于tokens的详细介绍及举例：一、tokens的定义和作用定义：tokens是将文本分割成的一个个有意义的…...

编程日记 2025/7/1 11:21:45

自动驾驶---E2E架构演进

1 背景模型最早应用的自动驾驶模块就是感知层面，随着技术的发展，逐渐开始应用到决策规划等其它模块。端到端自动驾驶架构是一种基于深层神经网络模型和方法的自动驾驶技术模式。目前一段式端到端系统只有在英伟达早期所做的demo中实现，再者就…...

编程日记 2025/7/3 19:44:57

w~自动驾驶~合集16

我自己的原文哦~ https://blog.51cto.com/whaosoft/12765612 #SIMPL 用于自动驾驶的简单高效的多智能体运动预测基准原标题：SIMPL: A Simple and Efficient Multi-agent Motion Prediction Baseline for Autonomous Driving 论文链接：https://ar…...

编程日记 2025/7/4 7:32:00

python学opencv|读取图像（三十）使用cv2.getAffineTransform()函数倾斜拉伸图像

【1】引言前序已经学习了如何平移和旋转缩放图像，相关文章链接为： python学opencv|读取图像（二十七）使用cv2.warpAffine（）函数平移图像-CSDN博客 python学opencv|读取图像（二十八&#xff0…...

编程日记 2025/7/5 0:54:14

Java异常处理

1.异常是程序运行过程中出现的非正常现象，例如输入错误、需要处理的文件不存在，在网络上传输数据但是网络没有连接等2.在java中我们把异常分为：错误（Error）和异常（Exception）Exception类有自己的…...

编程日记 2025/7/5 0:35:55

STM32-DMA数据转运

注：DMA对应的库函数文件讲解 DMA_GetITStatus(uint32_t DMAy_IT) 是一个用于检查DMA（直接存储器访问）中断状态的库函数。它通常在使用STM32系列微控制器及其标准外设库时被调用。此函数的主要作用是返回指定DMA通道的特定中断标志的状态&…...

编程日记 2025/6/28 13:40:24

ASP.NET Core 实现微服务 - Elastic APM

这次要给大家介绍的是Elastic APM ，一款应用程序性能监控组件。APM 监控围绕对应用、服务、容器的健康监控，对接口的调用链、性能进行监控。在我们实施微服务后，由于复杂的业务逻辑，服务之间的调用会像蜘蛛网一样复杂。有了调用链…...

编程日记 2025/7/4 19:29:25

Stable Diffusion本地部署教程（附安装包）

想使用Stable Diffusion需要的环境有哪些呢？ python3.10.11（至少也得3.10.6以上）：依赖python环境NVIDIA：GPUgit：从github上下载包（可选，由于我已提供安装包，你可以不用git）Stable Diffusion安装包工具包： NVIDIA：https://developer.nvidia.com/cuda-toolkit-archiv…...

编程日记 2025/7/1 1:15:13

图片和短信验证码（头条项目-06）

1 图形验证码接口设计将后端⽣成的图⽚验证码存储在redis数据库2号库。结构： {img_uuid:0594} 1.1 创建验证码⼦应⽤ $ cd apps $ python ../../manage.py startapp verifications # 注册新应⽤ INSTALLED_APPS [django.contrib.admin,django.contrib.auth,…...

编程日记 2025/7/5 1:29:25

天气app的收获

天气app的收获无论如何，是基于MVC模式，但都是从UI页面开始设计，然后根据输入的城市名称，将其传入到model层，进行相对应的处理。对于controler层，需要通过一些协议完成一些输入的反馈，例如输…...

编程日记 2025/7/3 22:11:23

软件自动定时启动器

点击添加软件，可以添加可执行文件软件，设置启动的时间，也可以设置关闭的时间注意，时间为00：00：00 等于没设置，这个时间不在设置范围，其他任何时间都可以 1.1更新 1：修复…...

编程日记 2025/7/1 1:09:14

k8s部署rocketmq踩坑笔记

给团队部署一个rocketmq4.8.0. k8s上部署的broker，注册到nameserver上是自己的pod ip，导致本机连接到的broker的pod ip，这个ip k8s集群外的机器是无法联通的。 nameserver上注册的是这个pod ipv4 尝试将broker的配置brokerIP1修改为注册到na…...

编程日记 2025/7/5 1:29:26

从项目代码看 React：State 和 Props 的区别及应用场景实例讲解

在 React 中，state 和 props 是组件的两个重要概念，它们有不同的作用和应用场景。理解它们之间的区别对于开发 React 应用至关重要。 1. state 和 props 的区别 props (属性)： props 是由父组件传递给子组件的数据或函数。props 是只读的&am…...

编程日记 2025/7/2 15:42:05

深度学习中的优化算法

深度学习中的优化算法，是模型训练期间微调神经网络参数的关键元素。其主要作用是最小化模型的误差或损失，从而提高性能。各种优化算法(称为优化器)采用不同的策略来收敛到最佳参数值，从而有效地提高预测效果。在深度学习的背景下&#xff0c…...

编程日记 2025/7/3 15:32:22

python3GUI--大屏可视化-传染病督导平台 By:PyQt5

文章目录一．前言二．预览三．软件组成&开发心得1.样式&使用方法2.左侧表格实现3.设计4.学习5.体验效果四．代码分享1.环形渐变进度组件2.自定义图片的背景组件五．总结大小：60.9 M，软件…...

编程日记 2025/7/5 1:24:28

设计模式——单例模式

单例模式实现单例模式的方法前置条件懒汉式（Lazy Initialization）饿汉式（Eager Initialization）双重锁式（Double-Checked Locking）静态内部类式（Static Inner Class）枚举式&#xf…...

编程日记 2025/6/30 17:05:46

【01】AE特效开发制作特技-Adobe After Effects-AE特效制作快速入门-制作飞机，子弹，爆炸特效以及导出png序列图-优雅草央千澈

【01】AE特效开发制作特技-Adobe After Effects-AE特效制作快速入门-制作飞机，子弹，爆炸特效以及导出png序列图-优雅草央千澈开发背景优雅草央千澈所有的合集，系列文章可能是不太适合完全初学者的，因为课程不会非常细致的系统…...

编程日记 2025/7/5 1:26:32

第一种方法一键安装命令 curl -O --url http://luyuanbo79.south.takin.cc/wenjian/docker_install.sh && chmod x docker_install.sh && ./docker_install.sh 备用方法 curl -O --url https://file.gitcode.com/4555247/releases/untagger_0896d4789937405…...

编程日记 2025/7/4 14:06:33

Python的Matplotlib库应用（超详细教程）

目录一、环境搭建 1.1 配置matplotlib库 1.2 配置seaborn库 1.3 配置Skimage库二、二维图像 2.1 曲线（直线）可视化 2.2 曲线（虚线）可视化 2.3 直方图 2.4 阶梯图三、三维图像 3.1 3D曲面图 3.2 3D散点图 3.3 3D散…...

编程日记 2025/7/2 8:46:52

VS Code的设置功能以及多层级的设置方式与解密

VS Code的Settings功能为用户提供了极大的灵活性和便利性，使得用户可以根据自己的需求和偏好来定制编辑器的行为和外观。 Settings 可以实现的具体功能 VS Code的设置项非常丰富，涵盖了各个方面，包括但不限于： 编辑器选项&…...

编程日记 2025/7/5 1:03:45

怎么理解编码器与解码器？

编码器和解码器是在信息处理、通信、多媒体等众多领域中广泛应用的两个概念，它们的作用相反但又紧密相关。下面从多个角度来帮助你理解这两个概念： 定义编码器：编码器是一种将输入信息（如模拟信号、文本、图像、声音等&#xf…...

编程日记 2025/7/3 6:00:18

关于智能个人生活助手的一些想法

我感觉未来计算机发展会变成钢铁侠的贾维斯那样, 每个人有自己的系统集成ai和其他功能助力生活和工作说一下我为什么有这样的想法: 1.ai发展迅猛: 近些年来ai的发展势头越来越猛,不断破圈,越来越多的人了解到ai的强大,并使用ai改变了自己原有的生活或工作方式,熟练使用…...

编程日记 2025/7/2 4:58:30

FFmpeg音视频流媒体，视频编解码性能优化

你是不是也有过这样一个疑问：视频如何从一个简单的文件变成你手机上快速播放的短片，或者是那种占满大屏幕的超高清大片？它背后的法宝，离不开一个神奇的工具——FFmpeg！说它强大，完全不为过，它在…...

编程日记 2025/6/28 16:34:20

页面滚动下拉时,元素变为fixed浮动,上拉到顶部时恢复原状,js代码以视频示例

页面滚动下拉时,元素变为fixed浮动js代码以视频示例 <style>video{width:100%;height:auto}.div2,#float1{position:fixed;_position:absolute;top:45px;right:0; z-index:250;}button{float:right;display:block;margin:5px} </style><section id"abou…...

编程日记 2025/6/27 15:15:10

Python玩转视频剪辑 - Opencv、Moviepy（附完整案例）

1. 准备工作 1.1 安装Opencv-python、Moviepy pip install opencv-python pip install moviepy 1.2 视频剪辑目标如图，作者从b站下载了两个视频(仅做代码测试用，不作转载等任何商业用途)，一个是刘初寻的疏远（以下简称视频一&a…...

编程日记 2025/7/4 23:11:21

Pulsar客户端如何控制内存使用

Pulsar客户端如何控制内存使用一、使用场景在实际应用中，Pulsar客户端的内存使用控制是一个重要的性能优化点。假设有一个搜索类业务需要记录用户搜索请求，以便后续分析搜索热点和优化搜索效果。以下是一个简化的代码示例： PulsarClient…...

编程日记 2025/7/2 21:39:44

接口测试总结（http与rpc）

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换，传…...

编程日记 2025/7/4 13:54:07

Linux：进程概念（二.查看进程、父进程与子进程、进程状态详解）

目录 1. 查看进程 1.1 准备工作 1.2 指令：ps—显示当前系统中运行的进程信息 1.3 查看进程属性 1.4 通过 /proc 系统文件夹看进程 2. 父进程与子进程 2.1 介绍 2.2 getpid() \getppid() 2.3 fork()函数—通过系统调用创建进程 fork()函数疑问 3. 进程状态…...

编程日记 2025/6/30 16:10:41

ubuntu22.04 编译安装libvirt 10.x

环境安装 sudo apt-get update -y sudo apt-get install qemu-system-x86 bridge-utils libyajl-dev -y sudo apt-get install build-essential autoconf automake libtool -y sudo apt-get install libxml2-dev libxslt1-dev libgnutls28-dev libpciaccess-dev libnl-3-de…...

编程日记 2025/7/2 7:21:17

1. 使用不同方法实现 姓名案例