Vue中watch与computed区别

<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>const vm = new Vue({el:'#root',data:{firstName: '张',lastName: '三',fullName:'张-三'},watch:{firstName(newValue){setTimeout(()=>{this.fullName = newValue+'-'+this.lastName},1000);},lastName(newValue){this.lastName = this.firstName+'-'+newValue}}})</script>

效果:更改姓之后延迟一秒显示改后的全名

 

总结:

 computed和watch之间的区别:

        1.computed能完成的功能,watch都可以完成

        2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。

两个重要的小原则:

        1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象。

        2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/5449.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring:Bean

Bean 概述配置方式自动装配继承与依赖作用域外部属性文件的使用 概述 Spring 容器负责管理依赖注入&#xff0c;它将被管理的对象都称为 bean 。我们通过 xml 文件配置方式进行对 bean 的声明和管理。 写法如下&#xff1a; <beans><bean id"bean的唯一标识符…

EasyExcel实现execl导入导出

引言 在实际开发中&#xff0c;处理 Excel 文件是一个常见的需求。EasyExcel 是一个基于 Java 的开源库&#xff0c;提供了简单易用的 API&#xff0c;可以方便地读取和写入 Excel 文件。本文将介绍如何使用 EasyExcel 实现 Excel 导入功能&#xff0c;以及一些相关的技巧和注…

qt for android 开发之tcp通讯

简介 通过TCP使PC和android手机相互通讯。 准备 使用QT的网络模块 QT core gui networkgreaterThan(QT_MAJOR_VERSION, 4): QT widgets.h 定义TCP接口 #include <QTcpSocket>class MainWindow : public QMainWindow {Q_OBJECTpublic:explicit MainWindow(Q…

计算机中CPU、内存、缓存的关系

CPU&#xff08;Central Processing Unit&#xff0c;中央处理器&#xff09; 内存&#xff08;Random Access Memory&#xff0c;随机存取存储器&#xff09; 缓存&#xff08;Cache&#xff09; CPU、内存和缓存之间有着密切的关系&#xff0c;它们共同构成了计算机系统的核…

网络安全进阶学习第五课——文件上传漏洞

文章目录 一、常见文件上传点二、任意文件上传漏洞三、任意文件上传危害四、webshell五、上传木马所需条件六、木马上传流程七、上传绕过1、绕过JS验证1&#xff09;Burpsuite剔除响应JS。2&#xff09;浏览器审计工具剔除JS 2、绕过MIME-Type验证1&#xff09;利用抓包工具&am…

Pytroch本地安装方法

1 查看电脑安装的cuda版本 nvidia-smi这里的红圈标注的是cuda 最高版本&#xff0c;虚拟环境中安装&#xff0c;只要不超过12.0就可以 第二步 去官网看torch, torchvision等版本的匹配关系 https://pytorch.org/get-started/previous-versions/ 比如这里&#xff1a; &…

uniapp项目 封装一个饼图组件 并且修改显示项的排列方式

需求如下: 真实数据渲染后的完成效果如下: 记录一下代码: <template><view><view style"height: 600rpx;"><l-echart ref"chart" finished"init"></l-echart></view></view> </template><…

欧几里得算法

0x00 前言 改补的内容是一点都不会少。本章来看欧几里得算法 0x01 概述 欧几里得算法又称为辗转相除法&#xff0c;指用于计算两个非负整数a和b的最大公约数。 两个整数的最大公约数是能够同时整除他们的最大的正整数。 基本原理&#xff1a;两个整数的最大公约数等于其中…

Springboot整合mybatisplus实战

Springboot整合mybatisplus&#xff0c;纯后端&#xff0c;验证结果是通过postman调用的&#xff0c;记录一下 1、建表语句以及初始化数据脚本 CREATE TABLE tbl_book (id int NOT NULL AUTO_INCREMENT,type varchar(20) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT…

Binder系列--获取ServiceManager

获取ServiceManager hongxi.zhu 2023-7-1 以SurfaceFlinger为例&#xff0c;分析客户端进程如何获取ServiceManager代理服务对象 主要流程 SurfaceFlinger中获取SM服务 frameworks/native/services/surfaceflinger/main_surfaceflinger.cpp // publish surface flingersp<…

进制转换(十进制与十六进制互转)

之前的一家公司基本上都是基于单片机进行开发&#xff0c;一般与上位机的通信都是按照自定义的协议进行操作&#xff0c;测试的时候会经常都对协议进行修改并且涉及到进制之间的转换&#xff0c;例如获取版本是十六进制的需要转换成十进制的版本信息&#xff0c;例如修改时间需…

主流特征工程平台(一)

一. 目标 对于Feature Store的能力与边界&#xff0c;每家的定义略微不同&#xff0c;《Feature Stores - A Hierarchy of Needs》&#xff09;这篇文章做了很好的总结&#xff0c;大体分为如下几个层次&#xff1a; 特征管理&#xff1a;特征抽取、处理、存储、元数据管理&am…