Vue 计算属性和监听器

文章目录

  • 一、计算属性
    • 1. 计算属性定义
    • 2. computed 比较 methods
    • 3. 计算属性完整写法
  • 二、监听器
    • 1. 普通监听
    • 2. 添加额外配置项

一、计算属性

1. 计算属性定义

概念:基于现有的数据,计算出来的新属性,依赖的数据变化,自动重新计算。

计算属性需在 computed 中进行声明,computed 与 data 同级,一个计算属性对应一个函数,我们将计算结果直接返回,外部使用计算属性的时候,把它当做普通属性使用就可以,直接写函数名来使用,不要写括号!

<div id = "app"><p>{{totalCount}}</p></div><script src="vue.js"></script><script>//一旦引入VueJS核心包,在全局环境,就有了Vue构造函数const app = new Vue({el: '#app',data: {list: [{id: 1, num: 1},{id: 2, num: 7},{id: 3, num: 3}]},computed: {totalCount() {let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值,此处的 0 代表起始的 sum 值为 0!

2. computed 比较 methods

① computed 计算属性

作用:封装了一段对于数据的处理,求得一个结果。
语法:作为属性直接使用,this.计算属性,{{ 计算属性 }}

② methods 方法

作用:给实例提供一个方法,调用以处理业务逻辑。
语法:作为方法需要调用,this.方法名(),{{ 方法名() }},@事件名=“方法名”。

methods 也可以用来处理数据,但是 computed 给我们提供了很好的缓存特性,计算属性会对计算出来的结果进行缓存,再次使用会直接读取缓存,依赖项变化了,会自动重新计算并再次缓存,所以如果要处理数据,我们还是优先选择 computed,可以提升性能。

3. 计算属性完整写法

计算属性默认的简写,只能读取访问,不能修改,如果要修改,就需要写计算属性完整的写法。

在这里插入图片描述

① 计算属性被查询时,执行 get 方法,有缓存,会将返回值作为求值的结果;
② 计算属性被修改时,执行 set 方法,需要修改的值会自动传递给 set 方法的形参。

二、监听器

作用:监视数据变化,执行一些业务逻辑或异步操作。
语法在这里插入图片描述

监听方法会在数据变化时,触发执行,我们一般只用新值 newValue 就可以了!

1. 普通监听

在这里插入图片描述

我们现在有一个问题就是,words 每输入一个字母,watch 都会监听一次并做出反应,其实一个完整的 words 并没有输入完,没必要时刻监听每一个字母的变化,这会导致服务器的压力很大。
解决办法是,增加防抖措施,先等一等,延迟一会再执行,如果一段时间内用户没有再输入,这时候再去执行。

<script>//一旦引入VueJS核心包,在全局环境,就有了Vue构造函数const app = new Vue({el: '#app',data: {timer: '',obj: {words: ''}},watch: {//防抖,延迟执行'obj.words' (newValue) {clearTimeout(this.timer)this.timer = setTimeout(() => {console.log('变化了', newValue)}, 500)}}})</script>

在这里插入图片描述

定义 setTimeout,让打印操作延迟 500 ms 再执行,如果超出 500 ms 用户还没有操作,就直接执行 console.log('变化了', newValue),setTimeout 返回的结果是延时器的 id,我们这里用 timer 接收,如果用户在 500 ms 内再次输入了数据,那么就根据 timer 把前面的延时器清空掉,重新开始计时,只要用户在不停地输入,那么我们后台的代码就一直延时执行,减少不必要的中间数据,极大提高效率。

其实这里的 timer 不需要在 data 里面定义,跟页面渲染无关的数据,直接使用 this.数据,即可绑定!

2. 添加额外配置项

deep:true,对复杂类型深度监视,可以同时监控多个数据,这些数据以对象的形式封装在 data 中,watch 中内置具体的处理方法,方法名必须为 handler,value 为发生变动后的对象。
immediate:true,初始化立刻执行一次 handler 方法,无需触发监听事件就可以执行一次。

在这里插入图片描述

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

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

相关文章

【计网】实现reactor反应堆模型 --- 框架搭建

没有一颗星&#xff0c; 会因为追求梦想而受伤&#xff0c; 当你真心渴望某样东西时&#xff0c; 整个宇宙都会来帮忙。 --- 保罗・戈埃罗 《牧羊少年奇幻之旅》--- 实现Reactor反应堆模型 1 前言2 框架搭建3 准备工作4 Reactor类的设计5 Connection连接接口6 回调方法 1 …

外包干了2年,快要废了。。。

先说一下自己的情况&#xff0c;普通本科毕业&#xff0c;在外包干了2年多的功能测试&#xff0c;这几年因为大环境不好&#xff0c;我整个人心惊胆战的&#xff0c;怕自己卷铺盖走人了&#xff0c;我感觉自己不能够在这样蹉跎下去了&#xff0c;长时间呆在一个舒适的环境真的会…

linux驱动-i2c子系统框架学习(2)

linux驱动-i2c子系统框架学习(1) 在这篇博客里面已经交代了i2c设备驱动层&#xff0c;主要的功能就是编写具体i2c的外设驱动&#xff0c;和创建设备接点给上层使用 &#xff0c;按之前学习的字符设备&#xff0c;有了设备节点&#xff0c;就可以对硬件操作了&#xff0c;在i2c…

Webserver(4.6)poll和epoll

目录 pollclient.cpoll.c epollepoll.cclient.c epoll的两种工作模式水平触发边沿触发 poll poll是对select的一个改进 select的缺点在于每次都需要将fd集合从用户态拷贝到内核态&#xff0c;开销很大。每次调用select都需要在内核遍历传递进来的所有fd&#xff0c;这个开销也…

Stable Diffusion的解读(一)

Stable Diffusion的解读&#xff08;一&#xff09; 文章目录 Stable Diffusion的解读&#xff08;一&#xff09;摘要Abstract一、机器学习部分1. Stable Diffusion的早期工作1.1 从编码器谈起1.2 第一条路线&#xff1a;VAE和DDPM1.3 第二条路线&#xff1a;VQVAE1.4 路线的交…

计算机网络——TCP篇

TCP篇 基本认知 TCP和UDP的区别? TCP 和 UDP 可以使用同一个端口吗&#xff1f; 可以的 传输层中 TCP 和 UDP在内核中是两个完全独立的软件模块。可以根据协议字段来选择不同的模块来处理。 TCP 连接建立 TCP 三次握手过程是怎样的&#xff1f; 一次握手:客户端发送带有 …

ROS话题通信机制理论模型的学习

话题通信是ROS&#xff08;Robot Operating System&#xff0c;机器人操作系统&#xff09;中使用频率最高的一种通信模式&#xff0c;其实现模型主要基于发布/订阅模式。 一、基本概念 话题通信模型中涉及三个主要角色&#xff1a; ROS Master&#xff08;管理者&#xff0…

【Android】名不符实的Window类

1.“名不符实”的Window类 Window 是一个窗口的概念&#xff0c;是所有视图的载体&#xff0c;不管是 Activity&#xff0c;Dialog&#xff0c;还是 Toast&#xff0c;他们的视图都是附加在 Window 上面的。例如在桌面显示一个悬浮窗&#xff0c;就需要用到 Window 来实现。Wi…

后端java——如何为你的网页设置一个验证码

目录 1、工具的准备 2.基本方法 3.实现类 4.实践 HTML文件&#xff1a; Java文件1:创建验证码 Java文件2:验证验证码 本文通过HUTOOL实现&#xff1a;Hutool参考文档Hutool&#xff0c;Java工具集https://hutool.cn/docs/#/ 1、工具的准备 如果我们通过hutool来实现这个…

【go从零单排】Strings and Runes 字符串和字符

Don’t worry , just coding! 内耗与overthinking只会削弱你的精力&#xff0c;虚度你的光阴&#xff0c;每天迈出一小步&#xff0c;回头时发现已经走了很远。 概念 在Go语言中&#xff0c;rune 是一个内置的数据类型&#xff0c;用于表示一个Unicode字符。它实际上是一个别名…

如何在本地Linux服务器搭建WordPress网站结合内网穿透随时随地可访问

文章目录 前言1. 安装WordPress2. 创建WordPress数据库3. 安装相对URL插件4. 安装内网穿透发布网站4.1 命令行方式&#xff1a;4.2. 配置wordpress公网地址 5. 配置WordPress固定公网地址 前言 本文主要介绍如何在Linux Ubuntu系统上使用WordPress搭建一个本地网站&#xff0c…

vue data变量之间相互赋值或进行数据联动

摘要&#xff1a; 使用vue时开发会用到data中是数据是相互驱动&#xff0c;经常会想到watch,computed&#xff0c;总结一下&#xff01; 直接赋值&#xff1a; 在 data 函数中定义的变量可以直接在方法中进行赋值。 export default {data() {return {a: 1,b: 2};},methods: {u…

在 Java 中使用脚本语言

在 Java 中使用脚本语言&#xff0c;特别是在 Java 平台上集成如 Python、JavaScript 或 Ruby 等语言&#xff0c;通常可以通过 Java 的 Scripting API 来实现。这个 API 基于 JSR 223&#xff08;“Scripting for the Java Platform”&#xff09;&#xff0c;提供了一种标准方…

大数据-212 数据挖掘 机器学习理论 - 无监督学习算法 KMeans 基本原理 簇内误差平方和

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

微服务系列六:分布式事务与seata

目录 实验环境说明 前言 一、分布式事务问题与策略 1.1 分布式事务介绍 1.2 分布式事务解决策略分析 二、分布式事务解决方案 Seata 2.1 认识Seata 2.2 Seata的工作原理 2.3 部署Seata微服务 2.3.1 准备数据库表 2.3.2 准备配置文件 2.3.3 docker部署 2.4 微服务集…

Java 上机实践2(基础数据类型与数组)

&#xff08;大家好&#xff0c;今天分享的是Java的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 实验一&#xff1a;输出希腊字母表 一、实验目的 二、实验要求 三、程序代码 四、实验结果 实验二&#xff1a;…

w024基于SpringBoot的企业客户管理系统的设计与实现

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0…

并发编程volatile精解

多线程下变量的不可见性 在多线程并发执行的情况下&#xff0c;多个线程修改共享的成员变量&#xff0c;会出现一个线程修改了共享变量的值后&#xff0c;另一个线程不能直接看到该线程修改后的变量最新值。(多线程下修改共享变量会出现变量修改值后的不可见性) 可见性问题…

十款外贸软件盘点,专注企业订单业务管理

在当今全球化的市场环境中&#xff0c;外贸企业的发展面临着诸多挑战与机遇。如何高效管理企业业务&#xff0c;提升运营效率&#xff0c;成为外贸企业在激烈竞争中脱颖而出的关键。外贸业务管理ERP软件作为一种强大的工具&#xff0c;能够整合企业资源、优化管理流程、实现数据…

yaml文件编写

Kubernetes 支持YAML和JSON格式管理资源 JSON 格式:主要用于 api 接口之间消息的传递 YAML 格式;用于配置和管理,YAML是一种简洁的非标记性语言,内容格式人性化容易读懂 一&#xff0c;yaml语法格式 1.1 基本语法规则 使用空格进行缩进&#xff08;不使用制表符&#xff0…