vue计算属性和监听器详解

1.watch 和 computed 的作用和区别

watch(侦听器)

  1. 作用: 监听器允许开发者自定义一个函数来观察 Vue 实例上的特定数据属性的变化,当这些属性发生变化时,会触发相应的回调函数。

  2. 特点

    • 非缓存:每次指定数据发生变化时都会立即执行监听函数。
    • 灵活性:不仅可以监听单个属性,还可以监听对象或数组的所有属性变化。
    • 深度监听:可以配置为深度监听,即监听嵌套对象内部属性的变化。
    • 异步支持:监听器可以异步执行,这对于处理复杂的副作用或者异步操作非常有用。
  3. 应用场景

    • 在某个数据属性变化时需要执行额外的操作,如数据格式化、API 请求、组件间通信等。
    • 执行副作用较大的计算,比如计算完成后再去更新另一个数据源。
      // 示例代码
      export default {data() {return {userInput: '',};},watch: {userInput(newValue, oldValue) {console.log('User input has changed from', oldValue, 'to', newValue);// 可能还会在这里进行进一步的处理,例如调用 API、过滤输入等},deepWatch: {handler: function (val) { /* ... */ },deep: true, // 深度监听},},
      };

computed(计算属性) 

  1. 作用: 计算属性是用来根据其他响应式属性值进行计算并返回结果的属性。当依赖于它的任何响应式属性发生变化时,它会自动重新计算,并更新到视图中。

  2. 特点

    • 缓存机制:计算属性具有缓存功能,只有在其依赖的响应式属性发生改变时才会执行计算逻辑。
    • 简洁声明:通过一个getter函数来定义计算属性,无需手动监听或触发更新。
    • 只读性:默认情况下,计算属性仅支持getter,不支持setter。这意味着你不能直接修改计算属性的值,只能通过修改其依赖的原始数据来间接影响其值。
  3. 应用场景

    • 当你需要基于一些复杂表达式或其他数据属性生成一个新的衍生状态时。
    • 优化性能,避免在模板中做过多的数据绑定和重复计算。

 

// 示例代码
export default {data() {return {firstName: 'John',lastName: 'Doe',};},computed: {fullName() {return `${this.firstName} ${this.lastName}`;},},
};

2. 什么情况下应该使用 watch?

使用 watch(侦听器)的情况:

  1. 当需要在特定数据变化后执行额外的操作: 当某个数据变化时需要触发一些非简单的、带有副作用的操作,如调用API、更新DOM、更改路由、发送事件等。

  2. 需要监听深层次对象的变化: 若要深度监听一个对象或数组内部属性的变化,应使用 watch 并设置 deep: true 选项。

  3. 手动控制执行时机或频率: 可以通过配置 immediate: true 来让回调在绑定时立即执行一次,或者根据条件决定是否执行回调逻辑。

  4. 针对特定数据变化的异步操作: 如果你需要在数据变化后执行异步任务,watch 更适合这种场景,因为它允许你编写异步回调函数。

    watch: {searchQuery: function(newVal, oldVal) {if (newVal !== oldVal) {this.fetchDataFromAPI(newVal); // 在搜索查询变化时发起API请求}},deepWatch: {handler(newValue) { /* ... */ },deep: true,},
    },

3. 什么情况下应该使用 computed

使用 computed(计算属性)的情况:

  1. 当需要基于其他状态或数据派生出新的状态时: 计算属性非常适合用于创建那些依赖于组件内部其他数据属性值进行计算,并且结果是可复用的状态。

  2. 当你希望自动缓存计算结果: 如果一个值的计算过程复杂或者耗时,而其依赖项没有改变的情况下多次获取该值时,应该使用计算属性。因为计算属性会自动缓存结果,只有在其依赖的数据发生变化时才会重新计算。

  3. 表达式可以简洁地定义为纯函数: 计算属性通常由一个返回值的getter方法组成,它仅根据输入(依赖的响应式数据)产生输出,不涉及副作用操作。

    computed: {fullName() {return this.firstName + ' ' + this.lastName;},
    }

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

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

相关文章

用支持向量机进行光学符号识别

🍉CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一|统计学|干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项,参与研究经费10w、40w级横向 文…

企业级大数据安全架构(十一)Kerberos接入dophinscheduler

作者:楼高 建议将dophinscheduler集成到Ambari安装部署,在Ambari上面开启kerberos 1.安装准备 编译 从GitHub获取dolphinscheduler-1.3.9源码 git clone https://github.com/apache/dolphinscheduler.git -b 1.3.9-releasehttps://github.com/apache/…

多输入回归预测|GWO-CNN-LSTM|灰狼算法优化的卷积-长短期神经网络回归预测(Matlab)

目录 一、程序及算法内容介绍: 基本内容: 亮点与优势: 二、实际运行效果: 三、算法介绍: 灰狼优化算法: 卷积神经网络-长短期记忆网络: 四、完整程序下载: 一、程序及算法内容…

java日志框架总结(七、使用过滤器自动打印接口入参、出参)

使用过滤器自动打印接口入参、出参首先要了解一个过滤器OncePerRequestFilter,一般使用这个过滤器进行日志打印。 一、OncePerRequestFilter 1)、什么是OncePerRequestFilter 回顾一下 Filter 的工作原理。Filter 可以在 Servlet 执行之前或之后调用。当请求被调度…

ChatGPT/GPT4科研应用与AI绘图及论文写作

2023年随着OpenAI开发者大会的召开,最重磅更新当属GPTs,多模态API,未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义,不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

重看LeakCanary

LeakCanary是我很久之前看的东西了,我当时侯对它的印象就是它可以用来检测内存泄漏,具体原理就是将弱引用对象延迟个5s然后看是否被回收,如果没有被回收,那么就说明发生了内存泄漏,其他的也没有仔细地看 现在就详细地梳理一遍这个流程: 1.L…

微服务篇之分布式事务

一、Seata架构 Seata事务管理中有三个重要的角色: TC (Transaction Coordinator) - 事务协调者:维护全局和分支事务的状态,协调全局事务提交或回滚。 TM (Transaction Manager) - 事务管理器:定义全局事务的范围、开始全局事务、…

docker学习总结

docker 1.初识Docker1.1.什么是Docker1.1.1.应用部署的环境问题1.1.2.Docker解决依赖兼容问题1.1.3.Docker解决操作系统环境差异1.1.4.小结 1.2.Docker和虚拟机的区别1.3.Docker架构1.3.1.镜像和容器1.3.2.DockerHub1.3.3.Docker架构1.3.4.小结 1.4.安装Docker 2.Docker的基本操…

Kubernetes Prometheus 系列|Prometheus介绍和使用|Prometheus+Grafana集成

目录 第1章Prometheus 入门1.1 Prometheus 的特点1.1.1 易于管理1.1.2 监控服务的内部运行状态1.1.3 强大的数据模型1.1.4 强大的查询语言 PromQL1.1.5 高效1.1.6 可扩展1.1.7 易于集成1.1.8 可视化1.1.9 开放性 1.2 Prometheus 的架构1.2.1 Prometheus 生态圈组件1.2.2 架构理…

Go 数据库编程精粹:database/sql 实用技巧解析

Go 数据库编程精粹:database/sql 实用技巧解析 简介database/sql 库的基础知识核心概念连接池驱动事务 环境配置 建立数据库连接连接到数据库示例:连接 MySQL 数据库连接池管理 执行查询和处理结果基本查询执行多行查询执行单行查询 结果处理处理多行结果…

基于Java SSM框架实现问卷调查系统项目【项目源码】

基于java的SSM框架实现问卷调查系统演示 B/S结构 BROWSER/SERVER程序架构方式是使用电脑中安装的各种浏览器来进行访问和使用的,相比C/S的程序结构不需要进行程序的安装就可以直接使用。BROWSER/SERVER架构的运行方式是在远程的服务器上进行安装一个,然…

普中51单片机学习(DS1302)

DS1302时钟 DS1302实时时钟具有能计算2100年之前的秒、分、时、日、日期、星期、月、年的能力,还有闰年调整的能力。内部含有31个字节静态RAM,可提供用户访问。采用串行数据传送方式,使得管脚数量最少,简单SPI 3线接口。工作电压…

4.8 Verilog过程连续赋值

关键词:解除分配,强制,释放 过程连续赋值是过程赋值的一种。赋值语句能够替换其他所有wire 或 reg 的赋值,改写wire 或 reg 类型变量的当前值。 与过程赋值不同的是,过程连续赋值表达式能被连续的驱动到wire 或 reg …

C++——基础语法(2):函数重载

4. 函数重载 函数重载就是同一个函数名可以重复被定义,即允许定义相同函数名的函数。但是相同名字的函数怎么在使用的时候进行区分呢?所以同一个函数名的函数之间肯定是要存在不同点的,除了函数名外,还有返回类型和参数两部分可以…

Composition API 和 Options API

为什么Composition API 比 Options API 更好 Composition API是Vue.js 3.x版本引入的一种新的组织代码的方式。它相对于Options API有一些明显的优势,使得它在某些场景下更加灵活和易于使用。 更好的逻辑组织:Composition API允许将相关代码逻辑打包在一…

如何进行数据库分区和分片操作?

什么是数据库分区和分片? 数据库分区和分片都是数据库物理设计中的技术,旨在提高数据库的性能和管理大规模数据。 数据库分区是一种物理数据库的设计技术,其主要目的是在特定的SQL操作中减少数据读写的总量以缩减响应时间。分区并不是生成新…

mysql 输出所在月份的最后一天

内置函数 LAST_DAY(date) 参数: date :一个日期或日期时间类型的值,表示要获取所在月份最后一天的日期。 返回值: 返回一个日期值,表示输入日期所在月份的最后一天。 栗子 月总刷题数和日均刷题数_牛客题霸_牛客…

本地配置多个git账户及ll设置

本地配置多个git账户 清除全局配置将命令行,切换到ssh目录生成GitLab和Gitee的公钥、私钥去对应的代码仓库添加 SSH Keys添加私钥ll设置 管理密钥验证仓库配置关于gitgitee.com: Permission denied (publickey) 清除全局配置 此步骤可以不做,经测试不影…

总结一下最近几个主界面

目前展示了用Avalonia做几个主要流行的主界面,演示了一下组件的使用。用不同的实现方式实现一些方法。 1、独立大屏展示,类似一个实时监控,这是一种目前很方便的大屏效果。 主要涉及的内内容: (1)窗标题实…

【视频编码\VVC】环路滤波基础知识

本文为新一代通用视频编码H.266\VVC原理、标准与实现的简化笔记。 定义:在视频编码过程中进行滤波,滤波后的图像用于后续编码。 目的:1、提升编码图像的质量。2、为后续编码图像提供高质量参考,获得更好的预测效果。 VVC中主要…