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

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

news 2026/3/26 21:53:00

计算属性的概念

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

    <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

AI绘画新革命：SDXL-Turbo镜像快速上手与实战测评

AI绘画新革命&#xff1a;SDXL-Turbo镜像快速上手与实战测评 想象一下这样的场景&#xff1a;你刚输入完几个单词&#xff0c;屏幕上就立即呈现出对应的图像。没有等待&#xff0c;没有延迟&#xff0c;就像思维直接转化为画面一样流畅。这就是SDXL-Turbo带来的AI绘画新体验—…...

编程新知 2026/3/26 21:46:01

Echarts实战：如何用散点图+面积图模拟Power BI丝带图效果（附完整代码）

Echarts实战&#xff1a;用散点图与面积图组合实现Power BI丝带图效果 1. 理解丝带图的核心价值与实现难点 丝带图&#xff08;Ribbon Chart&#xff09;作为Power BI的特色可视化组件&#xff0c;其独特之处在于能够直观展示数据在不同时间维度上的变化趋势和相对排名。这种图…...

编程新知 2026/3/26 21:17:53

基于COMSOL 5.5的精确非局部损伤模型：模拟脆性材料压缩、摩擦和剪切条件下的破坏行为研究

开发了一种基于COMSOL 5.5的损伤模型&#xff0c;专门用于模拟脆性材料在压缩、摩擦和剪切条件下的破坏行为。 该模型采用非局部本构关系&#xff0c;通过考虑材料内部微观结构的影响&#xff0c;精确捕捉脆性材料在受力过程中的应力分布和破坏机理。脆性材料的破坏模拟一直是工…...

编程新知 2026/3/26 20:41:48

成本对比实测：OpenClaw本地部署Qwen3.5-9B比API节省40%

成本对比实测&#xff1a;OpenClaw本地部署Qwen3.5-9B比API节省40% 1. 为什么我要做这个测试 上个月我给自己定了个目标&#xff1a;用OpenClaw实现个人知识库的自动化更新。这个任务需要每天抓取20篇行业文章&#xff0c;提取关键信息&#xff0c;整理成结构化笔记。最初我直…...

编程新知 2026/3/26 20:05:38

FlexASIO：打破专业音频壁垒的通用驱动解决方案

FlexASIO&#xff1a;打破专业音频壁垒的通用驱动解决方案 【免费下载链接】FlexASIO A flexible universal ASIO driver that uses the PortAudio sound I/O library. Supports WASAPI (shared and exclusive), KS, DirectSound and MME. 项目地址: https://gitcode.com/gh_…...

编程新知 2026/3/26 19:23:04

Cocos解耦移动和发射模块

目标&#xff1a;玩家受到摇杆A控制移动和方向&#xff0c;发射受到摇杆B负责方向和发射 //玩家模块 ccclass(Player) export class Player extends Component {//玩家速度Speed:number 500;//玩家方向property(Vec3)PlayerDir:Vec3;//虚拟摇杆property(Node)Joystick:Node n…...

编程新知 2026/3/26 19:00:45

手把手教你用4090D单卡24G显存本地跑DeepSeek-R1：KTransformers保姆级安装与避坑指南

手把手教你用4090D单卡24G显存本地跑DeepSeek-R1&#xff1a;KTransformers保姆级安装与避坑指南 最近在折腾大模型本地部署的朋友们&#xff0c;应该都听说过DeepSeek-R1这个671B参数的"巨无霸"。传统认知里&#xff0c;这种规模的模型至少需要专业级GPU集群才能跑起…...

编程新知 2026/3/26 18:24:28

Vitis自定义IP编译报错？手把手教你修复Makefile路径问题（附完整代码）

Vitis自定义IP编译报错&#xff1f;手把手教你修复Makefile路径问题&#xff08;附完整代码&#xff09; 最近在Vitis中导入包含自定义IP的XSA文件时&#xff0c;不少开发者遇到了令人头疼的编译错误——"xxx.h: No such file or directory"。这个看似简单的报错背后…...

编程新知 2026/3/26 18:05:56

零基础玩转OpenClaw：借助GLM-4.7-Flash实现首个自动化脚本

零基础玩转OpenClaw&#xff1a;借助GLM-4.7-Flash实现首个自动化脚本 1. 为什么选择OpenClaw作为个人自动化助手 去年夏天&#xff0c;当我第三次因为忘记定时发送周报而被领导提醒时&#xff0c;终于下定决心寻找一个能24小时待命的数字助手。在尝试了各种RPA工具后&#x…...

编程新知 2026/3/26 17:51:54

第 11 章 追踪与性能分析（OpenOCD）

第 11 章 追踪与性能分析 导读：现代 ARM 处理器内置了丰富的 CoreSight 追踪基础设施，包括 ETM 指令追踪、ITM/DWT 数据追踪、SWO/TPIU 追踪输出以及 SEGGER RTT 高速日志。本章将系统介绍如何在 OpenOCD 中配置和使用这些追踪功能，帮助开发者在不侵入目标程序的前提下，完成…...

编程新知 2026/3/26 17:29:37