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

Vue 计算属性基础知识 监听属性watch

news 2026/1/31 22:16:11

计算属性的概念

在{{}}模板中放入太多的逻辑会让模板内容过重且难以维护。例如以下代码：

    <div id="app">{{msg.split('').reverse().join('')}}</div><script>const vm = new Vue({el: "#app",data: {msg:'我想把vue学的细一点'}})</script>

在上面的{{}}中，模板不再是简单的声明式逻辑。必须看一段时间才能看得懂，这里是想要显示变量msg反转后的字符串。想要在模板中多次引用此处的反转字符串时，就会更加难以处理。因此，对于复杂逻辑，都应当使用计算属性。
计算属性本质是一种方法

    <div id="app">{{ReverseMsg}}</div><script>const vm = new Vue({el: "#app",data: {msg: '我想把vue学的细一点'},computed: {ReverseMsg: function () {return this.msg.split("").reverse().join("")}}})</script>

在这里插入图片描述

计算属性虽被称为属性，但也是用来储存数据的（跟data一样），它的本质是方法。
计算属性一般是用来描述一个属性值依赖于，另一个属性值，当使用模板表达式{{}}将计算属性绑定到页面元素上时，计算属性会依赖的属性值变化时会自动更新DOM元素。

计算属性的组成

计算属性实际上由get函数和 set函数组成，分别用来获取和计算属性的值。
上文写到的代码只有一个方法，实际上就是get函数，即默认写就是get函数，通过get函数可以获取到计算属性的值，不过在需要时也可以提供一个set函数。改变了计算属性的值，set函数就会被执行，也就是通过计算属性的set方法可以检测到计算属性的改变。

    <div id="app">{{ReverseMsg}}<input type="text" v-model="msg"></div><script>const vm = new Vue({el: "#app",data: {msg: '我想把vue学的细一点'},computed: {//只有一个get函数的写法// ReverseMsg: function () {//     return this.msg.split("").reverse().join("")// }//get函数和set函数都有的写法ReverseMsg: {get: function () {return this.msg.split("").reverse().join("")},set: function (newvalue) {  //方法名固定为set 参数newvalue为改变后的计算属性的值console.log("计算属性被改变了")console.log("改变后的值：" + newvalue)}}}})</script>

在这里插入图片描述

注意：
在set方法里面不要去直接 改变计算属性的值，否则会导致死循环。想要改变计算属性的值，一般是通过改变它的依赖值。

监听属性watch

监听属性watch是Vue实例的一个选项，使用watch监听器的方法可以检测某个数据是否发生变化，如果发生变化则可以执行一系列业务逻辑操作。

监听器以key-value的形式定义，key是一个字符串，它是需要被检测的对象，而value则可以是字符串、函数或是一个对象，或是否执行深度遍历deep，即是否对象内部的属性进行监听，value实际上是监听到key变化后执行的回调函数。

    <div id="app">{{msg}}<input type="text " v-model="msg"></div><script>const vm = new Vue({el: "#app",data: {msg: "我想学vue"},computed: {},methods: {},watch: {//监听msg的值是否发生改变，发生改变时执行相应的回调函数 从而执行业务逻辑msg: function (newValue, oldValue) {console.log(`新的值 : ${newValue}`)}}})</script>

在这里插入图片描述

回调函数的参数newValue表示被监听属性改变后的值，而oldValue则表示被监听属性改变前的值。

    <div id="app">{{msg}}<input type="text " v-model="msg"></div><script>const vm = new Vue({el: "#app",data: {msg: "我想学vue"},computed: {},methods: {watchMsg: function (newValue, oldValue) {console.log(`新的值 : ${newValue}`)}},watch: {//监听msg的值是否发生改变，发生改变时执行相应的回调函数 从而执行业务逻辑msg: `watchMsg`}})</script>

像这样的监听器的回调函数写进methods里面也是可以的

vm.$watch使用

Vue实例方法vm.$watch的格式如下：

vm.$watch(data,callback[,options])

第一个参数为要监听的数据；第二个参数为回调函数；第三个函数为选项，可有可无。

实际上，vm.$watch与Vue实例选项watch是一样的，只是写的位置不一样。实例方法写在new Vue()的外面，watch选项是写在里面，另外实例方法前面有美元符号。

    <div id="app">{{msg}}<input type="text " v-model="msg"></div><script>const vm = new Vue({el: "#app",data: {msg: "我想学vue"},computed: {},})//注意：下面的msg外的单引号不能漏掉，其也可以换成双引号vm.$watch('msg', function (newValue, oldValue) {console.log(`新值：${newValue} 旧值：${oldValue}`)})</script>

计算属性与监听属性watch使用总结

计算属性的结果会被缓存起来，只有依赖的属性发生变化时才会重新计算，必须返回一个数据，主要用来进行纯数据的操作。
监听器主要用来监听某个数据的变化，从而去执行某些具体的回调业务逻辑，但不仅仅局限于返回数据。比如，当在数据变化时需要执行异步发送ajax请求或开销较大的操作时，采用监听器较好。

综合练习

通过v-model指令双向绑定数据，通过文本框改变数据后，浏览器会重新回到原来的函数。

解决方法：1、浏览器自带的本地存储器：localStorage
2、在生命周期中的mounted时间段 读取本地存储器 并把值赋值给数据

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../js/vue.js"></script>
</head><body><div id="app">{{msg}}<input type="text " v-model="msg" v-on:keyup="gaibian"></div><script>const vm = new Vue({el: "#app",data: {msg: ""},computed: {},mounted: function () {this.msg = localStorage.getItem("msg")},methods: {gaibian() {localStorage.setItem("msg", this.msg)}}})</script>
</body></html>

输入文本

在这里插入图片描述

刷新页面后数据依然保留

在这里插入图片描述

相关文章：

Vue 计算属性基础知识 监听属性watch

计算属性的概念 在{{}}模板中放入太多的逻辑会让模板内容过重且难以维护。例如以下代码&#xff1a; <div id"app">{{msg.split().reverse().join()}}</div><script>const vm new Vue({el: "#app",data: {msg:我想把vue学的细一点}})&…...

编程日记 2023/4/30 3:09:04

PAT：L1-004 计算摄氏温度、L1-005 考试座位号、L1-006 连续因子（C++）

目录 L1-004 计算摄氏温度 问题描述&#xff1a; 实现代码&#xff1a; L1-005 考试座位号 问题描述&#xff1a; 实现代码&#xff1a; 原理思路&#xff1a; L1-006 连续因子 问题描述&#xff1a; 实现代码&#xff1a; 原理思路&#xff1a; 过于简单的就不再写…...

编程日记 2023/4/30 15:05:08

Redis集群方案应该怎么做？

今天我们来跟大家唠一唠JAVA核心技术-RedisRedis是一款流行的内存数据库&#xff0c;适用于高性能的数据缓存和实时数据处理。当需要处理大量数据时&#xff0c;可以使用Redis集群来提高性能和可用性。Redis在单节点模式下&#xff0c;虽然可以支持高并发、快速读写、丰富的数据…...

编程日记 2023/4/30 15:05:05

连续点击返回键退出Android 应用

问题 业务需要&#xff0c;在主界面连续点击返回键退出应用&#xff0c;记录一下。 解决方案 先说结论&#xff0c;在主界面Activity中添加如下代码 /*** 记录上次点击返回键时间*/private long lastClickTime 0;/*** 两次回退点击时间间隔设置不小于2s*/public static fi…...

编程日记 2023/4/30 15:05:03

【PyTorch】教程：torch.nn.Hardswish

torch.nn.Hardswish 原型 CLASS torch.nn.Hardswish(inplaceFalse) 参数 inplace (bool) – 内部运算&#xff0c;默认为 False 定义 Hardswish(x){0if x≤−3,xif x≥3,x⋅(x3)/6otherwise\text{Hardswish}(x) \begin{cases} 0 & \text{if~} x \le -3, \\ x & \te…...

编程日记 2023/4/30 15:05:00

nacos源码入门

nacos官方文档地址&#xff1a;nacos官方文档 Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service的首字母简称&#xff0c;一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 简单来说&#xff0c;nacos就是一个注册中心、配置中心&#xff0…...

编程日记 2023/4/30 15:04:58

【记录】Samba｜Windows 11的Samba连接切换用户

Samba是一个用于共享文件和打印机的网络协议&#xff0c;可以使不同的操作系统之间共享文件和资源变得容易。在Windows 11上&#xff0c;可以使用Samba来连接到网络共享。 如果您想在Windows 11上切换用户并连接到另一个Samba共享&#xff0c;可以按照以下步骤操作。 文章目录…...

编程日记 2023/4/30 15:04:55

vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用

vue hiprint vue使用hiprint打印控件VUE HiPrint HiPrint简单使用安装相关依赖安装Hi PrintJQuery引入依赖简单使用官方所有 打印示例安装相关依赖 安装Hi Print npm install vue-plugin-hiprintJQuery 因为 hi print 使用到了 JQuery 所以需要安装对应依赖 npm i jquery -…...

编程日记 2023/4/30 15:04:53

HBase常用Shell命令

HBase提供了一个非常方便的命令行交互工具HBase Shell。通过HBase Shell&#xff0c;HBase可以与MySQL命令行一样创建表、索引&#xff0c;也可以增加、删除和修改数据&#xff0c;同时集群的管理、状态查看等也可以通过HBase Shell实现。 一、数据定义语言 数据定义语言&…...

编程日记 2023/4/30 15:04:50

【阿里云】Apsara Clouder云计算专项技能认证-云服务器ECS入门，考试真题分享

以下是阿里云Apsara Clouder云计算专项技能认证-云服务器ECS入门真题汇总篇分享&#xff1a; 1.下列哪一个不是重置ECS密码的步骤? A. 查看实例详情 B.进入控制台 C.远程连接ECS D.点击控制台“概览” 2.针对云服务器ECS安全组说法正确的是 A.是一种物理防火墙 B.仅用于控制…...

编程日记 2023/4/30 15:04:47

怎样编写java程序

搭建好了Java开发环境之后&#xff0c;下面就来学习一下如何开发Java程序。为了让初学者更好地完成第一个Java程序&#xff0c;接下来通过几个步骤进行逐一讲解。 1&#xff0e;编写Java源文件 在D盘根目录下新建一个test文件夹&#xff0c;并在该文件夹中新建文本文档&#…...

编程日记 2023/4/30 15:04:44

面向对象设计模式：结构型模式之适配器模式

一、引入 Object Oriented Adapters 二、XX 模式 aka&#xff1a;Wrapper (包装器) 2.1 Intent 意图 Convert the interface of a class into another interface clients expect. 将一个类的接口转换成客户希望的另外一个接口. 作为两个不兼容的接口之间的桥梁 适配器模式使…...

编程日记 2023/4/30 15:04:41

Unity3D Shader系列之模板测试

一、 模板测试原理模板测试位于GPU渲染流水线的逐片元操作阶段&#xff0c;片元着色器完成之后就会进入模板测试&#xff0c;模板测试通过后再进入深度测试。我们的GPU中有一个模板缓冲区(Stencil Buffer)(Stencil即是模板的意思)&#xff0c;其大小为整个屏幕大小*8位&#xf…...

编程日记 2023/4/30 15:04:38

机器学习中的数学——精确率与召回率

在Yolov5训练完之后会有很多图片&#xff0c;它们的具体含义是什么呢&#xff1f; 通过这篇博客&#xff0c;你将清晰的明白什么是精确率、召回率。这个专栏名为白话机器学习中数学学习笔记&#xff0c;主要是用来分享一下我在 机器学习中的学习笔记及一些感悟&#xff0c;也希…...

编程日记 2023/4/30 15:04:35

Oracle启动数据库报ORA-01102解决办法

1.机器启动之后登录服务器使用sqlplus / as sysdba 登录数据库发现数据库并没有启动之前把数据库服务添加过开机自启动 2.使用startup命令启动数据库报错了 SYSorcl>startup; ORACLE 例程已经启动。 Total System Global Area 2471931904 bytes Fixed Size 2255752 byt…...

编程日记 2023/4/30 15:04:31

Go 语言面向对象编程及实践

面向对象编程是计算机科学中的一种重要的编程方法，它将数据和处理它的代码组合成对象，并将这些对象组合成更大的程序。在 Go 语言中，我们同样可以使用面向对象编程的方式进行开发。本篇文章将介绍 Go 语言面向对象编程的概念、特性、使用方法以及实践技巧。 面向对象编程概…...

编程日记 2023/4/30 15:04:29

0102 MySQL05

1.约束 1.约束&#xff08;constraint&#xff09;&#xff1a;在创建表时&#xff0c;可以给表中的字段加上一些约束&#xff0c;保证表中数据的完整性&#xff0c;有效性 常见的约束&#xff1f; 非空约束&#xff1a;not null 唯一性约束&#xff1a;unique 主键约束&am…...

编程日记 2023/4/30 15:04:26

[深入理解SSD系列 闪存2.1.3] 固态硬盘闪存的物理学原理_NAND Flash 的读、写、擦工作原理

2.1.3.1 Flash 的物理学原理与发明历程 经典物理学认为 物体越过势垒，有一阈值能量；粒子能量小于此能量则不能越过，大于此能 量则可以越过。例如骑自行车过小坡，先用力骑，如果坡很低，不蹬自行车也能 靠惯性过去。如果坡很高，不蹬自行车，车到一半就停住，然后退回去。 …...

编程日记 2023/5/1 7:01:38

洗地机哪家强？洗地机排行榜

随着清洁行业电器的开展&#xff0c;越来越多的新颖工具和电器开端进入消费者的生活之中。众所周知&#xff0c;面对美不胜收的清洁电器产品&#xff0c;选购也是一大头疼事&#xff0c;应该怎样选购洗地机等清洁电器呢&#xff0c;实在的用户体验和清洁效率莫过于消费者最看重…...

编程日记 2023/5/1 7:01:36

【Java基础 下】 029 -- 多线程

目录 一、为什么要有多线程&#xff1f; 1、线程与进程 2、多线程的应用场景 3、小结 二、多线程中的两个概念&#xff08;并发和并行&#xff09; 1、并发 2、并行 3、小结 三、多线程的三种实现方式 1、继承Thread类的方式进行实现 2、实现Runnable接口的方式进行实现 3、利用…...

编程日记 2023/5/1 7:01:34

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2026/1/31 12:47:41

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/1/23 11:38:02

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/12/4 0:13:33

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、Spring MVC与MyBatis技术解析 一、第一轮基础概念问题 1. Spring框架的核心容器是什么&#xff1f;它的作用是什么&#xff1f; Spring框架的核心容器是IoC&#xff08;控制反转&#xff09;容器。它的主要作用是管理对…...

编程新知 2025/7/17 8:16:30

02.运算符

目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&&#xff1a;逻辑与 ||&#xff1a;逻辑或 &#xff01;&#xff1a;逻辑非 短路求值 位运算符 按位与&&#xff1a; 按位或 | 按位取反~ …...

编程新知 2026/1/30 8:31:24