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

Vue15 计算属性VS监视属性（侦听属性）

news 2026/2/10 2:40:36

计算属性VS监视属性（侦听属性）

computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

监视属性实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_watch实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- computed和watch之间的区别：1.computed能完成的功能，watch都可以完成。2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。两个重要的小原则：1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。--><!-- 准备好一个容器--><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},watch:{firstName(val){setTimeout(()=>{console.log(this)this.fullName = val + '-' + this.lastName},1000);},lastName(val){this.fullName = this.firstName + '-' + val}}})</script>
</html>

计算属性实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_计算属性实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',},computed:{//完整写法/* fullName:{get(){console.log('get被调用了')return this.firstName + '-' + this.lastName},set(value){console.log('set',value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}} *///简写fullName(){console.log('get被调用了')return this.firstName + '-' + this.lastName}}})</script>
</html>

区别

用计算属性实现上述功能，比较简单。但是如果想要实现当姓改变时，延迟一秒在改变姓名的值，则必须使用监视属性的写法。
如果用计算属性，以下写法是错误的

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>姓名案例_计算属性实现</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root">姓：<input type="text" v-model="firstName"> <br/><br/>名：<input type="text" v-model="lastName"> <br/><br/>全名：<span>{{fullName}}</span> <br/><br/></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',},computed:{//完整写法/* fullName:{get(){console.log('get被调用了')return this.firstName + '-' + this.lastName},set(value){console.log('set',value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}} *///简写fullName(){//错误写法 注意 注意 注意，因为fullName没有return了console.log('get被调用了')setTimeout(()=>{return this.firstName + '-' + this.lastName},1000);					}}})</script>
</html>

相关文章：

Vue15 计算属性VS监视属性（侦听属性）

计算属性VS监视属性&#xff08;侦听属性&#xff09; computed和watch之间的区别&#xff1a; 1.computed能完成的功能&#xff0c;watch都可以完成。 2.watch能完成的功能&#xff0c;computed不一定能完成&#xff0c;例如&#xff1a;watch可以进行异步操作。 两个重要的小…...

编程日记 2023/10/17 11:35:51

快速全面掌握数据库系统核心知识点

快速全面掌握数据库系统核心知识点 一、数据库系统二、三级模式-两层映射三、三级模式-视图四、数据库设计过程五、E-R模型六、关系代数七、规范化理论八、函数依赖九、规范化理论-键十、规范化理论-求候选键十一、规范化理论-范式十二、规范化理论-第一范式十三、规范化理论-第…...

编程日记 2023/10/17 11:34:49

学习笔记 | 音视频 | 推流项目框架及细节

推流项目： 跑起来项目，再调，创造问题，注意项目跑起来包括哪些步骤 前期准备：环境的配置 依赖库要交叉编译，编译还需注意依赖的库对应的头文件（注意是绝对路径还是相对路径） Rv1126_lib、arm_libx264、arm_libx265、arm_libsrt、arm32_ffmpeg_srt、arm_openssl Ubuntu搭…...

编程日记 2023/10/17 11:32:47

拓扑几何学

目录 一&#xff0c;欧拉定理 1&#xff0c;平面图论图 2&#xff0c;单连通多面体 3&#xff0c;一般多面体 一&#xff0c;欧拉定理 1&#xff0c;平面图论图 在一个联通无向图中&#xff0c;点数-边数面数 1 如&#xff1a; 7-126 1 如果把最外面的五边形外面也算…...

编程日记 2023/10/17 11:30:44

1.12.C++项目：仿muduo库实现并发服务器之LoopThreadPool模块的设计

文章目录 一、LoopThreadPool模块二、实现思想&#xff08;一&#xff09;功能&#xff08;二&#xff09;意义&#xff08;三&#xff09;功能设计 三、代码 一、LoopThreadPool模块 1.线程数量可配置&#xff08;0或多个&#xff09; 2. 对所有的线程进行管理&#xff0c;其…...

编程日记 2023/10/17 11:29:41

SpringBoot介绍

一、什么是SpringBoot 在使用传统的Spring去做Java EE&#xff08;Java Enterprise Edition&#xff09;开发中&#xff0c;大量的 XML 文件存在于项目之中&#xff0c;导致JavaEE项目变得慢慢笨重起来&#xff0c;繁琐的配置和整合第三方框架的配置&#xff0c;导致了开发和部…...

编程日记 2023/10/17 11:27:39

2022最新版-李宏毅机器学习深度学习课程-P17 卷积神经网络CNN

一、CNN 用于图像分类 需要图片大小统一 彩色图像分为R G B 三层&#xff0c;展平后首尾相接 值代表着颜色的强度 图像识别中不需要全连接的&#xff0c;参数太多了 观测1&#xff1a;通过判断多个小局部图像就能判断出图片标签 感受野的定义 简化1 感受野可以重叠&#xff…...

编程日记 2023/10/17 11:26:38

微博清理僵尸粉

1.选择chrome或者firefox浏览器 2.登陆微博账号 3.chrome右键点检查&#xff0c;选择console firefox右键点检查&#xff0c;选择控制台 4.粘贴下面代码到console或者控制台并且回车 let removeTargetFans false; /*是否删除符合条件的粉丝&#xff0c;默认关闭*/let dee…...

编程日记 2023/10/17 11:25:37

创建React Native的第一个hello world工程

创建React Native的第一个hello world工程 需要安装好node、npm环境 如果之前没有安装过react-native-cli脚手架的&#xff0c;可以按照下述步骤直接安装。如果已经安装过的&#xff0c;但是在使用这个脚手架初始化工程的时候遇到下述报错的话 cli.init(root, projectname);…...

编程日记 2023/10/17 11:23:35

基础课3——自然语言处理的应用

自然语言处理是一种将人类语言转换为机器语言&#xff0c;以实现人机交互的技术。应用非常广泛&#xff0c;例如&#xff1a; 人机交互&#xff1a;自然语言处理技术可以应用于人机交互&#xff0c;让机器能够理解和运用人类语言&#xff0c;从而实现更加智能化的交互体验。 机…...

编程日记 2023/10/17 11:21:32

理解 Git 的三个工作区：工作区、暂存区和版本库

文章目录 创建 Git 本地仓库配置Git认识⼯作区、暂存区、版本库添加⽂件--场景查看 .git ⽂件添加⽂件--场景⼆ 创建 Git 本地仓库 要提前说的是&#xff0c;仓库是进⾏版本控制的⼀个⽂件⽬录。我们要想对⽂件进⾏版本控制&#xff0c;就必须先创建⼀个仓库出来。创建⼀个 Gi…...

编程日记 2023/10/17 11:20:30

web前端基础训练-----创建用户反馈表单

1&#xff0c;实验代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>用户反馈表单</title></head><body><form><fieldset><h1>用户反馈</h1><hr/><h4>亲爱的用…...

编程日记 2023/10/17 11:19:29

Scrum 敏捷管理流程图及敏捷管理工具

​敏捷开发中的Scrum流程通常可以用一个简单的流程图来表示&#xff0c;以便更清晰地展示Scrum框架的各个阶段和活动。以下是一个常见的Scrum流程图示例&#xff1a; 转自&#xff1a;Leangoo.com 免费敏捷工具 这个流程图涵盖了Scrum框架的主要阶段和活动&#xff0c;其中包括…...

编程日记 2023/10/17 11:18:27

Android Handler/Looper视角看UI线程的原理

概述 Handler/Looper机制是android系统非重要且基础的机制&#xff0c;即使在rtos或者linux操作系统上开发应用框架时&#xff0c;也经常借鉴这个机制。通过该机制机制可以让一个线程循环处理事件&#xff0c;事件处理逻辑即在Handler的handleMessge种。本文建议android8.1源码…...

编程日记 2023/10/17 11:17:26

【网络】网络入门

网络入门 一、网络发展二、网络协议初识1、认识"协议"2、协议分层3、OSI七层模型4、TCP/IP五层(或四层)模型 三、网络传输基本流程1、同局域网的两台主机通信2、跨网络的两台主机通信 四、网络中的地址管理1、IP地址2、认识MAC地址 一、网络发展 独立模式&#xff1a…...

编程日记 2023/10/17 11:16:25

GO-实现简单文本格式 文本字体颜色、大小、突出

毫无疑问GO的生态就是一坨大便。老子英文水平小学啊。 实现简单文本格式 文本字体颜色、大小、突出显示等。 创建要给docx文件容器【我估算的】 doc : document.New() defer doc.Close() doc.SaveToFile("simple.docx") 把容器保存为文件 设置标题 创建自然段…...

编程日记 2023/10/17 11:15:24

铅华洗尽,粉黛不施,人工智能AI基于ProPainter技术去除图片以及视频水印(Python3.10)

视频以及图片修复技术是一项具有挑战性的AI视觉任务&#xff0c;它涉及在视频或者图片序列中填补缺失或损坏的区域&#xff0c;同时保持空间和时间的连贯性。该技术在视频补全、对象移除、视频恢复等领域有广泛应用。近年来&#xff0c;两种突出的方案在视频修复中崭露头角&…...

编程日记 2023/10/17 11:13:21

latex，不带行号的algorithm

\usepackage{algorithm,algorithmic}\begin{algorithm} \caption{The Example Algorithm} \label{alg123} \begin{algorithmic} \STATE{\textbf{Input:} ...} \STATE{\textbf{Output:} ...} \IF{...} \STATE{...} \ENDIF \RETURN{...} \end{algorithmic} \end{algorithm}...

编程日记 2023/10/17 11:12:21

RocketMQ高性能核心原理与源码架构剖析

文章目录 一、源码环境搭建主要功能模块源码启动服务启动nameServer启动Broker发送消息消费消息 二、源码热身阶段NameServer的启动过程关注重点源码重点 Broker服务启动过程关注重点源码重点 Netty服务注册框架关注重点源码重点关于RocketMQ的同步结果推送与异步结果推送 Brok…...

编程日记 2023/10/17 11:11:20

MATLAB中zp2tf函数用法

目录 语法 说明 示例 质点弹簧系统的传递函数 zp2tf函数的功能是将零极点增益滤波器参数转换为传递函数形式。。 语法 [b,a] zp2tf(z,p,k) 说明 [b, a] zp2tf(z, p, k) 将一个分解的传递函数表示方式转换。 将单输入/多输出&#xff08;SIMO&#xff09;系统的多输出…...

编程日记 2023/10/17 11:10:16

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/8 4:23:14

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

编程新知 2026/1/25 11:13:37

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

编程新知 2026/1/25 6:36:06

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2026/1/30 16:09:53

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2026/2/6 22:55:12

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

编程新知 2025/8/18 11:32:48

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

leetcode_69.x的平方根

题目如下 &#xff1a; 看到题 &#xff0c;我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历&#xff0c;我们是整数的平方根&#xff0c;所以我们分两…...

编程新知 2026/1/29 2:41:37

【QT控件】显示类控件

目录 一、Label 二、LCD Number 三、ProgressBar 四、Calendar Widget QT专栏&#xff1a;QT_uyeonashi的博客-CSDN博客 一、Label QLabel 可以用来显示文本和图片. 核心属性如下 代码示例: 显示不同格式的文本 1) 在界面上创建三个 QLabel 尺寸放大一些. objectName 分别…...

编程新知 2026/2/4 18:27:37

【Axure高保真原型】图片列表添加和删除图片

今天和大家分享图片列表添加和删除图片的原型模板&#xff0c;效果包括&#xff1a; 点击图片列表的加号可以显示图片选择器&#xff0c;选择里面的图片&#xff1b; 选择图片后点击添加按钮&#xff0c;可以将该图片添加到图片列表&#xff1b; 鼠标移入图片列表的图片&…...

编程新知 2026/2/8 11:40:20