Vue 计算属性和监听器

embedded/2024/11/8 20:52:18/

文章目录

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

一、计算属性

1. 计算属性定义

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

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

<div id = "app"><p>{{totalCount}}</p></div><script src="vue.js"></script><script>javascript">//一旦引入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.ppmy.cn/embedded/135988.html

相关文章

无人机之数据链技术篇

一、无人机数据链的定义与功能 无人机数据链是任务机、地面控制站之间&#xff0c;以及任务机与中继机、武器系统或其它操作平台之间&#xff0c;按照约定的通信协议和信息传输方式&#xff0c;进行指令交互、信息传递的无线通信链路。它是无人机与外部世界沟通的桥梁&#xff…

实战技巧:深入Air780E的WebSocket应用

让我们来学习Air780E的WebSocket的实战技巧吧&#xff0c;看完本章就透彻了... 1、WebSocket概述 WebSocket是HTML5下一种新的协议&#xff08;本质上是一个基于TCP的协议&#xff09;&#xff0c;它实现了浏览器与服务器之间的全双工通信&#xff0c;能够节省服务器资源和带宽…

[docker]拉取镜像失败

List item vim /etc/docker/daemon.json在insecure-registries中添加你的socket&#xff08;IP端口号&#xff09; {"bip": "33.33.33.1/24","registry-mirrors": ["https://docker.mirrors.ustc.edu.cn/"],"insecure-registri…

网络--应用层协议--HTTP

1、HTTP协议特性 1、HTTP协议(超文本传输协议):定义了客户端(如浏览器)与服务器之间的通信方式,以交换或传输超文本(超文本:视频、音频、文字等) 2、HTTP协议是客户端与服务器通信基础:客户端通过HTTP协议向服务器发送请求,服务器处理后返回响应。 3、HTTP协议是无连接…

Spring Boot整合RabbitMQ

这里只会演示部分常用的工作模式 1.工作队列模式 1.1引入相关依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency><dependency><groupId>org.s…

什么是Mysql事务-特性-类型

什么是事务 事务&#xff08;Transaction&#xff09; 是并发控制的基本单位。 所谓的事务&#xff0c;它是一个操作序列&#xff0c;这些操作要么都 执行&#xff0c;要么都不执行&#xff0c;它是一个不可分割的工作单位。 事务是数据库维护数据一致性的单位&#xff0c;在每…

人保财险(外包)面试分享

前言&#xff1a; 这是本月面的第三家公司&#xff0c;太难了兄弟们&#xff0c;外包都不好找了&#xff0c;临近年底&#xff0c;金九银十已经错过了&#xff0c;金三银四虽然存在&#xff0c;但按照这几年的行情&#xff0c;金九银十和金三银四其实已经是不复存在了&#xf…

鸿蒙生态崛起:开发者的机遇与挑战

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题 点这里。 实战项目访问&#xff1a;http://javapub.net.cn/ 引言 作为一名技术博主&#xff0c;我对技术趋势始终保持着敏锐的洞察力。在数字化时代&#xff0c;操作系统作为智能设备的核心&#xff0c;其重要性不言而喻。随…