Vue15 计算属性VS监视属性（侦听属性）
计算属性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监视属性（侦听属性） computed和watch之间的区别： 1.computed能完成的功能，watch都可以完成。 2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。 两个重要的小…...
快速全面掌握数据库系统核心知识点
快速全面掌握数据库系统核心知识点 一、数据库系统二、三级模式-两层映射三、三级模式-视图四、数据库设计过程五、E-R模型六、关系代数七、规范化理论八、函数依赖九、规范化理论-键十、规范化理论-求候选键十一、规范化理论-范式十二、规范化理论-第一范式十三、规范化理论-第…...
学习笔记 | 音视频 | 推流项目框架及细节
推流项目： 跑起来项目，再调，创造问题，注意项目跑起来包括哪些步骤 前期准备：环境的配置 依赖库要交叉编译，编译还需注意依赖的库对应的头文件（注意是绝对路径还是相对路径） Rv1126_lib、arm_libx264、arm_libx265、arm_libsrt、arm32_ffmpeg_srt、arm_openssl Ubuntu搭…...
拓扑几何学
目录 一，欧拉定理 1，平面图论图 2，单连通多面体 3，一般多面体 一，欧拉定理 1，平面图论图 在一个联通无向图中，点数-边数面数 1 如： 7-126 1 如果把最外面的五边形外面也算…...
1.12.C++项目：仿muduo库实现并发服务器之LoopThreadPool模块的设计
文章目录 一、LoopThreadPool模块二、实现思想（一）功能（二）意义（三）功能设计 三、代码 一、LoopThreadPool模块 1.线程数量可配置（0或多个） 2. 对所有的线程进行管理，其…...
SpringBoot介绍
一、什么是SpringBoot 在使用传统的Spring去做Java EE（Java Enterprise Edition）开发中，大量的 XML 文件存在于项目之中，导致JavaEE项目变得慢慢笨重起来，繁琐的配置和整合第三方框架的配置，导致了开发和部…...
2022最新版-李宏毅机器学习深度学习课程-P17 卷积神经网络CNN
一、CNN 用于图像分类 需要图片大小统一 彩色图像分为R G B 三层，展平后首尾相接 值代表着颜色的强度 图像识别中不需要全连接的，参数太多了 观测1：通过判断多个小局部图像就能判断出图片标签 感受野的定义 简化1 感受野可以重叠ÿ…...
微博清理僵尸粉
1.选择chrome或者firefox浏览器 2.登陆微博账号 3.chrome右键点检查，选择console firefox右键点检查，选择控制台 4.粘贴下面代码到console或者控制台并且回车 let removeTargetFans false; /*是否删除符合条件的粉丝，默认关闭*/let dee…...
创建React Native的第一个hello world工程
创建React Native的第一个hello world工程 需要安装好node、npm环境 如果之前没有安装过react-native-cli脚手架的，可以按照下述步骤直接安装。如果已经安装过的，但是在使用这个脚手架初始化工程的时候遇到下述报错的话 cli.init(root, projectname);…...
基础课3——自然语言处理的应用
自然语言处理是一种将人类语言转换为机器语言，以实现人机交互的技术。应用非常广泛，例如： 人机交互：自然语言处理技术可以应用于人机交互，让机器能够理解和运用人类语言，从而实现更加智能化的交互体验。 机…...
理解 Git 的三个工作区：工作区、暂存区和版本库
文章目录 创建 Git 本地仓库配置Git认识⼯作区、暂存区、版本库添加⽂件--场景查看 .git ⽂件添加⽂件--场景⼆ 创建 Git 本地仓库 要提前说的是，仓库是进⾏版本控制的⼀个⽂件⽬录。我们要想对⽂件进⾏版本控制，就必须先创建⼀个仓库出来。创建⼀个 Gi…...
web前端基础训练-----创建用户反馈表单
1，实验代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>用户反馈表单</title></head><body><form><fieldset><h1>用户反馈</h1><hr/><h4>亲爱的用…...
Scrum 敏捷管理流程图及敏捷管理工具
敏捷开发中的Scrum流程通常可以用一个简单的流程图来表示，以便更清晰地展示Scrum框架的各个阶段和活动。以下是一个常见的Scrum流程图示例： 转自：Leangoo.com 免费敏捷工具 这个流程图涵盖了Scrum框架的主要阶段和活动，其中包括…...
Android Handler/Looper视角看UI线程的原理
概述 Handler/Looper机制是android系统非重要且基础的机制，即使在rtos或者linux操作系统上开发应用框架时，也经常借鉴这个机制。通过该机制机制可以让一个线程循环处理事件，事件处理逻辑即在Handler的handleMessge种。本文建议android8.1源码…...
【网络】网络入门
网络入门 一、网络发展二、网络协议初识1、认识"协议"2、协议分层3、OSI七层模型4、TCP/IP五层(或四层)模型 三、网络传输基本流程1、同局域网的两台主机通信2、跨网络的两台主机通信 四、网络中的地址管理1、IP地址2、认识MAC地址 一、网络发展 独立模式：…...
GO-实现简单文本格式 文本字体颜色、大小、突出
毫无疑问GO的生态就是一坨大便。老子英文水平小学啊。 实现简单文本格式 文本字体颜色、大小、突出显示等。 创建要给docx文件容器【我估算的】 doc : document.New() defer doc.Close() doc.SaveToFile("simple.docx") 把容器保存为文件 设置标题 创建自然段…...
铅华洗尽,粉黛不施,人工智能AI基于ProPainter技术去除图片以及视频水印(Python3.10)
视频以及图片修复技术是一项具有挑战性的AI视觉任务，它涉及在视频或者图片序列中填补缺失或损坏的区域，同时保持空间和时间的连贯性。该技术在视频补全、对象移除、视频恢复等领域有广泛应用。近年来，两种突出的方案在视频修复中崭露头角&…...
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}...
RocketMQ高性能核心原理与源码架构剖析
文章目录 一、源码环境搭建主要功能模块源码启动服务启动nameServer启动Broker发送消息消费消息 二、源码热身阶段NameServer的启动过程关注重点源码重点 Broker服务启动过程关注重点源码重点 Netty服务注册框架关注重点源码重点关于RocketMQ的同步结果推送与异步结果推送 Brok…...
MATLAB中zp2tf函数用法
目录 语法 说明 示例 质点弹簧系统的传递函数 zp2tf函数的功能是将零极点增益滤波器参数转换为传递函数形式。。 语法 [b,a] zp2tf(z,p,k) 说明 [b, a] zp2tf(z, p, k) 将一个分解的传递函数表示方式转换。 将单输入/多输出（SIMO）系统的多输出…...
解决：uniapp项目中调用小程序的chooseAddress() API失效
目录 问题描述 解决方案 问题描述 使用 Hbuilder X 编辑器和 uni-app 框架开发小程序项目，在调用小程序提供的 uni.chooseAddress() API实现选择收货地址的功能时，点击选择收货地址没有反应，获取不到用户收货地址，API失效了 …...
2023 项目组总结（待完善）
2023 项目组总结 目录概述需求： 设计思路实现思路分析1.JA项目2.XC项目3.XL 项目4.tydic 项目 总结 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy，skip hardness,make a better re…...
Chrome浏览器 键盘快捷键整理
名人说：莫听穿林打叶声，何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 本篇笔记整理：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 目录 〇、前言一、常用快捷键二、分类型快捷键表（…...
【JAVA】集合与背后的逻辑框架，包装类，List，Map，Set，静态内部类
❤️ Author： 老九 ☕️ 个人博客：老九的CSDN博客 🙏 个人名言：不可控之事 乐观面对 😍 系列专栏： 文章目录 collectionCollection创建collection使用泛型collection方法 Map 接口Map的存储结构HashMap和Tr…...
mac电脑版数字图像处理软件：ACDSee Photo Studio 9最新 for Mac
ACDSee Photo Studio 9是一款由ACD Systems开发的功能强大的照片管理和编辑软件，专为Mac用户提供一站式解决方案，方便用户轻松浏览、管理和编辑照片。该软件提供了许多实用的工具和功能，包括高效的导入和排序工具、强大的编辑工具、智能组织和…...
酷开系统 | 酷开科技让你放肆嗨唱，聆听内心最真实的声音
在这个喧嚣的城市里，每个人都像是一座孤岛，漂浮在茫茫人海之中，我们总是忙于奔波在各种琐事之间，渐渐忘记了内心深处的声音，我们压抑自己的情感，害怕被误解、被批评，然而真正的我们，…...
PC电脑 VMware安装的linux CentOs7如何扩容磁盘？
一、VM中进行扩容设置 必须要关闭当前CentOS，不然扩展按钮是灰色的。 输入值必须大于当前磁盘容量。然后点击扩展，等待扩展完成会提示一个弹框，点击确定，继续确定。 二、操作CentOS扩容——磁盘分区 第一步设置完成。那就启动 …...
redis极速的奥秘
文章目录 1.基于内存存储实现2.高效的数据结构3.合理的数据编码4.合理的线程模型5. 虚拟内存机制实现原理 1.基于内存存储实现 内存读写是比在磁盘快很多的，Redis 基于内存存储实现的数据库，相对于数据存在磁盘的 MySQL 数据库，省去磁盘 I/O…...
three.js之初识three.js
什么是three.js Three.js是一款运行在浏览器中的 3D 引擎（基于WebGL的API的封装） 什么是WebGL？ WebGL（英语：Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和Open…...
二维码智慧门牌管理系统：地址管理的现代革命
文章目录 前言一、标准地址的革新二、广泛的应用前景 前言 在科技不断发展和社会进步的背景下，高效、精准、智能的管理系统已经成为当今社会的迫切需求。传统的门牌管理系统在应对这一需求方面已显得力不从心，因此，二维码智慧门牌管理系统的…...
wordpress朋友圈主题/网站推广软件下载
combox存在问题 界面加载完成信号 Component.onCompleted: { console.log(“1”) } combox盒子组件 combox{ model:{ console.log(“2”) } onActivated: { } onCurrentTextChanged: { } } 以上发现总是先打印2，再打印1； onCurrentTextChanged信号在i…...
局网站建设管理整改情况/青岛seo关键词
在Python里面，函数可以作为参数传入一个函数，函数也可以复制给变量，通过变量调用函数。装饰器可以扩展一个函数的功能，为函数做一个装饰器注解，可以把装饰器里面定义的功能于所有函数提前执行，提升代码的复…...
易点租电脑租赁官网/seo关键词查询
TensorFlow学习笔记（五）：tf.reshape用法...
温岭网站开发/朋友圈信息流广告投放价格
Exchange Server 2016 RTM 可以在 Windows Server 2012、Windows Server 2012 R2 和 Windows Server 2016 的标准版和企业版中进行部署安装，但 Exchange Server 2016 只支持完整 GUI 的 Windows Server 而不支持核心安装的系统，本文我们将对快速部署方式…...
淘宝上那些做网站seo的管用吗/武汉it培训机构排名前十
1.在MySQL中创建数据库 """创建mysql数据库""" import pymysql # 数据库连接引用类 from pymysql.connections import Connection # 游标操作类 from pymysql.cursors import Cursor# 通过pymysql的方法connect()方法声明一个MySQL连接对象conn。…...
上海建网站制/教育机构退费纠纷找谁
第一个JSP实际上，JSP只是简单地将Java放到HTML网页中去而已。你可以将现有的HTML网页将它们的扩展名由“.html”改为“.jsp”，这是一个创建第一个JSP最好的方法。我们可以将上一个练习中的文件将它的扩展名由“.html”改为“.jsp”。然后在浏览器中装载新…...