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

【Vue】二:Vue核心处理---计算属性 监视属性

文章目录

  • 1.计算属性示例
  • 2. 监听属性
  • 3.补充

1.计算属性示例

在这里插入图片描述
在这里插入图片描述
实际上计算属性与methods中定义方法基本上没有什么区别,只是计算属性基于响应式依赖缓存,只要数据没有发生改变,计算属性从缓存中取值,只有当数据发送改变,才会重新执行函数。

计算属性的 getter 方法的调用时机:
1 第一个时机:初次访问该属性。
2 第二个时机:计算属性所依赖的数据发生变化时。

计算属性的 setter 方法的调用时机:
1 当计算属性被修改时。

只考虑读取,不考虑修改时,可以启用计算属性的简写形式。
简写:
在这里插入图片描述

2. 监听属性

watch: {被监听的属性名: {handler(newValue, oldValue) {}}
}

在这里插入图片描述
在这里插入图片描述

(1)如果想初始化的时候调用一次handler,则可以写上:immediate: true
(2)监视多级结构中某个属性的变化,写法是:‘a.b.c’ : {}。注意单引号
(3)开启深度监视,需要监视一个具有多级结构的属性,并且监视所有的属性,需要深度监视。
(4)后期添加监视

vm.$watch('被监视的属性名', {})

(5)简写
添加监视简写

watch:{ 被监视的属性名1(newVal,oldVal){}, 被监视的属性名2(newVal, oldVal){} }

后期添加的监视简写

vm.$watch('被监视的属性名', function(newVal, oldVal){})

3.补充

(1)computed和 watch 都能够完成的,优先选择 computed。
(2)如果要开启异步任务,只能选择 watch。因为 computed 依靠 return。watch 不需要依赖 return。

(3)所有 Vue 管理的函数,建议写成普通函数。
(4)所有不属于 Vue 管理的函数,例如 setTimeout 的回调函数、Promise 的回调函数、AJAX 的回调函数,建议使用箭头函数。

相关文章:

【Vue】二:Vue核心处理---计算属性 监视属性

文章目录 1.计算属性示例2. 监听属性3.补充 1.计算属性示例 实际上计算属性与methods中定义方法基本上没有什么区别,只是计算属性基于响应式依赖缓存,只要数据没有发生改变,计算属性从缓存中取值,只有当数据发送改变,才…...

【Web服务器集群】Nginx网站服务

文章目录 一、Nginx 概述1.什么是 Nginx2.Nginx 的特点3.Nginx 应用场景 二、Nginx 服务基础1.编译安装 Nginx 服务1.1 布置环境1.2 安装依赖包1.3 创建运行用户、组1.4 编译安装 2.Nginx 的运行控制2.1 检查配置文件2.2 启动、停止 Nginx2.3 日志分割以及升级 Nginx 服务2.4 添…...

开始第一个vue项目,环境搭建+html项目运行

【用vue.js,通过script标签导入】 1. 搭建vue脚手架 安装node js安装cnpm(淘宝源) 【vue】在windows中搭建vue开发环境(全网最详细)_vue环境搭建_一起来学吧的博客-CSDN博客2a 2. 官网下载地址: 安装 …...

Redis 的数据类型和命令帮助

文章结构 Redis 数据类型1. Redis全局命令(跟key有关系,而跟value无关)2. StringsGetting and setting StringsManaging counters 3. Lists(L)Basic commandsBlocking commands 4. Sets(S)Basic commands 5. Hashes(H)Basic commands 6. Sort…...

【C++11】智能指针

什么是智能指针: 智能指针是一个类,用来存储指向动态分配对象的指针,负责自动释放动态分配的对象,防止堆内存泄漏。动态分配的资源,交给一个类对象去管理,当类对象声明周期结束时,自动调用析构函…...

三、Go的常用命令以及Go的执行原理

Go的执行原理以及Go的命令 一、Go的源码文件 Go 的源码文件分类: 如上图,分为三类: 1、命令源码文件: 声明自己属于 main 代码包、包含无参数声明和结果声明的 main 函数。 命令源码文件被安装以后,GOPATH 如果…...

ESP32 CAM 模块和 OpenCV 的二维码扫描器

概述 该项目是关于使用 ESP32 CAM 模块和 OpenCV 设计的二维码扫描仪或阅读器。我们将使用 ESP32 摄像头模块和 python 库开发一个程序和设备,我们可以用它来扫描二维码。使用 ESP32 CAM,项目变得更便宜。 QR 码现在已经成为我们日常生活的一部分,因为我们几乎在任何地方都…...

多链路传输技术在火山引擎 RTC 的探索和实践

动手点关注 干货不迷路 传统的数据传输方式大多是利用一个链路、选择设备的默认网卡进行传输,使用这种方式实现实时音视频通话时,如果默认网络出现问题(如断网、弱网等),用户的通信就会发生中断或者卡顿,影…...

在Flask中构建API接口

重定向行为 斜杠 以下两个路由的不同之处在于是否使用尾部的斜杠。 第一个路由的URL尾部有一个斜杠,看起来就像一个文件夹,访问一个没有斜杠结尾的URL时,Flask会自动进行重定向,在结尾加上一个斜杠。 第二个路由的URL没有尾部…...

Postgres vs MySQL

主要区别及示例 简而言之,Postgres 和 MySQL 之间的主要区别实际上归结为主索引和辅助索引的实现方式以及数据的存储和更新方式。 让我们进一步探讨这个问题。 但首先... 基础知识 索引是一种数据结构(主要是 B 树),允许通过…...

02.IP地址以及静态路由配置

文章目录 IP地址IP地址分类IPV4地址(32位)IPV4地址的分类特殊IP地址 VLSM --- 可变长子网掩码(子网划分)CLDR --- 无类域间路由(汇总)配置静态路由的基础配置静态路由的拓展配置 IP地址 IP地址分类 IPV4(32位二进制构成) — 点分十进制IPV6(128位二进制构成) — 冒分十六进制…...

GD32(STM32)因为中断问题,导致不能进行程序 正常运行

项目中,之前定时器中断就用了个TIM2,但后来程序优化需要再加一个计数定时器TIM6, TIM_TimeBaseInitTypeDef TIM_TimeBaseStructure; // 开启定时器时钟,即内部时钟CK_INT72M RCC_APB1PeriphClockCmd(RCC_APB1Perip…...

华为OD机试真题B卷 Java 实现【统计字符】,附详细解题思路

一、题目描述 输入一行字符,分别统计出包含英文字母、空格、数字和其它字符的个数。 数据范围:输入的字符串长度满足 1 \le n \le 1000 \1≤n≤1000 。 二、输入描述 输入一行字符串,可以有空格。 三、输出描述 统计其中英文字符&#…...

深入理解设计原则之开闭原则(OCP)

系列文章目录 C高性能优化编程系列 深入理解设计原则系列 深入理解设计模式系列 高级C并发线程编程 OCP:开闭原则 系列文章目录1、开闭原则的定义和解读2、如何理解“对扩展开放,对修改关闭”3、实现开闭原则的方法4、如何在团队协作中保证开闭原则的实…...

【学习随笔】

2022/11/13 HTML :讲完了 css:讲完了 作业:编写登陆界面、整理一下sql优化,对于mybatis不熟练的继续练习 关于MySQL优化的问题? 思路总结:主要考虑数据库优化与SQL语句优化。 1,数据库优化,包括存储引擎的优化&…...

【多路IO复用】select

select: 1.select:当被监听的 fd(文件描述符)就绪后会返回,但是我们无法知道具体是哪些 fd 就绪了,只能遍历所有的 fd。通常来说某一时刻,就绪的 fd 并不会很多,但是使用 select 必须要遍历所有…...

cuda编程学习——基础知识介绍!干货向(三)

本文主要内容为介绍CUDA编程前的一些基础知识 参考资料: 高升博客 《CUDA C编程权威指南》 以及 CUDA官方文档 文章、讲解视频同步更新公众《AI知识物语》,B站:出门吃三碗饭 1:并行计算 并行程序可以分为 指令并行&#xff1…...

30 VueComponent 事件的绑定

前言 这是最近的碰到的那个 和响应式相关的问题 特定的操作之后响应式对象不“响应“了 引起的一系列的文章 主要记录的是 vue 的相关实现机制 呵呵 理解本文需要 vue 的使用基础, js 的使用基础 测试用例 用例如下, 我们这里核心关注 事件的处理流程 问题的调试 整个…...

作用域及作用域链

作用域 隔离变量的集合 作用域最大的用处就是隔离变量,不同作用域内的同名变量不会有命名冲突。 作用域类型 全局作用域,函数作用域和块级作用域。 1)全局作用域,在整个代码文件中都可以访问的作用域。 2)函数作用域…...

深入解析Linux C/C++ 编程中的内存泄漏问题

深入解析Linux C/C 编程中的内存泄漏问题 I. 前言 (Introduction)1.1 文章目的与内容概述 (Purpose and Overview of the Content)1.2 重要性和实用性的说明 (Significance and Practicality Explanation)1.3 数据结构与内存泄漏的基本概念 (Basic Concepts of Data Structure …...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

测试markdown--肇兴

day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂&#xff…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...