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

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

news 2026/5/12 5:44:02

计算属性的概念

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

    <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

CSS如何实现一致的圆角半径设计_通过CSS变量存储border-radius

能&#xff0c;但需注意变量作用域、fallback机制及单位完整性&#xff1b;推荐:root定义基础值并用var(--radius-md, 8px)&#xff0c;避免嵌套覆盖与无单位变量&#xff0c;旧浏览器需前置静态值。border-radius 用 CSS 变量统一管理&#xff0c;真能省事&#xff1f;能&…...

编程新知 2026/5/12 5:41:35

Cursor编辑器Markdown规则集：AI生成文档自动化格式规范指南

1. 项目概述&#xff1a;一个为 Cursor 编辑器定制的 Markdown 规则集 如果你和我一样&#xff0c;日常重度依赖 Cursor 这款 AI 驱动的代码编辑器&#xff0c;并且经常需要编写大量的技术文档、项目 README 或者技术博客&#xff0c;那你一定遇到过这样的痛点&#xff1a;AI …...

编程新知 2026/5/12 4:08:12

从零构建AI智能体编排平台：TalonOS架构解析与实战指南

1. 项目概述&#xff1a;从零构建一个自主智能体编排平台如果你正在寻找一个能将多个AI智能体像交响乐团一样组织起来&#xff0c;协同完成复杂任务的解决方案&#xff0c;那么你很可能已经接触过或听说过TalonOS。这个项目&#xff0c;或者说这个愿景&#xff0c;代表了一种全…...

编程新知 2026/5/12 3:50:04

地下水位监测仪：实现深井水位远程自动观测

设备是什么地下水位监测仪是一种用于测量地下水、矿山井或地热井中水位高度的仪器。它采用投入式探头设计&#xff0c;基于静水压力原理工作&#xff1a;当传感器探头固定在水下某一点时&#xff0c;通过感知该点上方水柱产生的压力&#xff0c;结合安装高程&#xff0c;即可换…...

编程新知 2026/5/12 3:32:37

Vite+React+TypeScript构建个人作品集网站：从技术选型到GitHub Pages自动化部署

1. 项目概述&#xff1a;一个现代开发者如何构建自己的技术名片最近刚把自己的个人作品集网站重构上线&#xff0c;地址是https://yucco-k.github.io。这不仅仅是一个展示作品的静态页面&#xff0c;更是一个我用来实践和整合现代前端技术栈的“游乐场”。对于开发者而言&#…...

编程新知 2026/5/12 2:57:22

PyInstaller打包的EXE程序修改与反编译

PyInstaller打包的EXE程序修改与反编译完全指南 前言 在实际工作中&#xff0c;我们经常会遇到需要修改已打包的Python EXE程序的情况——可能是界面文字需要调整&#xff0c;也可能是功能需要微调。本文将系统介绍如何对PyInstaller打包的EXE程序进行反编译、修改和重新打包&a…...

编程新知 2026/5/12 2:49:19

AI工具导航与实战指南：从分类体系到选型策略

1. 项目概述&#xff1a;AI-Infinity&#xff0c;一个前沿AI工具的探索者指南如果你和我一样&#xff0c;对AI领域层出不穷的新工具感到既兴奋又头疼&#xff0c;那么这个项目绝对值得你花时间深入了解。AI-Infinity&#xff0c;这个由开发者meetpateltech维护的GitHub仓库&…...

编程新知 2026/5/12 2:09:42

保姆级排错：Keil里J-Link选项神秘消失？手把手教你定位GD32E23等ARM-M23内核芯片的调试器兼容问题

当Keil调试器选项消失时&#xff1a;深度解析ARM-M23内核芯片的调试兼容性问题 第一次在Keil的Debug配置界面发现J-Link选项神秘消失时&#xff0c;我盯着屏幕愣了几秒钟——前一天明明还能正常使用的工具链&#xff0c;怎么突然就"罢工"了&#xff1f;这种看似"…...

编程新知 2026/5/12 2:07:25

为AI智能体构建持久化记忆系统：Shang Tsung项目实战解析

1. 项目概述&#xff1a;为AI智能体注入“灵魂”与“第二大脑”如果你和我一样&#xff0c;长期与各类AI智能体&#xff08;Agent&#xff09;打交道&#xff0c;无论是基于Claude Code、OpenClaw&#xff0c;还是其他本地化部署的LLM工具&#xff0c;你一定经历过那种令人沮丧…...

编程新知 2026/5/12 1:56:49

markdownReader：终极Chrome插件，让本地Markdown文件阅读体验提升300%

markdownReader&#xff1a;终极Chrome插件&#xff0c;让本地Markdown文件阅读体验提升300% 【免费下载链接】markdownReader markdownReader is a extention for chrome, used for reading markdown file. 项目地址: https://gitcode.com/gh_mirrors/ma/markdownReader …...

编程新知 2026/5/12 1:39:54