拒绝废话:computed、watch和methods的区分和使用场景

computed、watch和methods是用于处理数据和响应数据变化的不同方式,三者之间有什么不同呢,贝格前端工场作为10年前端老司机,用浅显的语言给大家分享一下。

computed:

computed属性是用来定义一个基于依赖的响应式属性。它会根据它所依赖的数据自动进行计算,并且只有在相关依赖发生改变时才会重新计算。

computed属性适合用于需要根据相关数据动态计算得出的属性值,比如对数据进行过滤、排序、格式化等操作。

computed: {fullName() {return this.firstName + ' ' + this.lastName;}
}

watch:

watch属性是用来监听指定数据的变化,并在数据变化时执行相应的操作。它可以监听一个或多个数据的变化,也可以进行深度监听。

watch适合用于需要在数据变化时执行异步或复杂的操作,或者需要监听对象或数组的变化。

watch: {firstName(newVal, oldVal) {console.log('firstName changed');}
}

methods:

methods属性是用来定义一些方法,用于处理用户交互、事件响应等操作。methods中的方法可以接收参数,并且可以调用其他方法或触发事件。

methods适合用于处理用户交互、触发事件、进行复杂的计算等操作。

methods: {greet() {console.log('Hello, ' + this.fullName);}
}

总结:

  • computed用于基于依赖的响应式属性的计算,适合用于计算属性值;
  • watch用于监听数据的变化,适合用于执行异步或复杂的操作,或者监听对象或数组的变化;
  • methods用于定义方法,用于处理用户交互、事件响应等操作。


 


 

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

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

相关文章

OrangePi 学习摘录

文章目录 1. 参考2. 开发板 Orange-Pi-CM4 预览3. 烧录 Linux 镜像到 TF 卡中4. 制作桌面版镜像qemu/chroot 5. Armbian6. 编译 1. 参考 淘宝 香橙派官网 Orange-Pi-3B Orange-Pi-CM4 基于docker构建香橙派zero系统构建环境 2. 开发板 Orange-Pi-CM4 预览 3. 烧录 Linux 镜像…

微信小程序基本语法

官网 https://developers.weixin.qq.com/miniprogram/dev/framework/ 视频教程:尚硅谷微信小程序开发教程,2024最新微信小程序项目实战! 仿慕尚花坊项目源码:https://gitee.com/abcdfdewrw/flower-workshop 目录 一,初…

【深度学习】BeautyGAN: 美妆,化妆,人脸美妆

https://www.sysu-hcp.net/userfiles/files/2021/03/01/3327b564380f20c9.pdf 【深度学习】BeautyGAN: Instance-level Facial Makeup Transfer with Deep Generative Adversarial Network BeautyGAN: Instance-level Facial Makeup Transfer with Deep Generative Adversaria…

交叉编译ethtool(ubuntu 2018)

参考文章:https://www.cnblogs.com/nazhen/p/16800427.html https://blog.csdn.net/weixin_43128044/article/details/137953913 1、下载相关安装包 //ethtool依赖libmul git clone http://git.netfilter.org/libmnl //ethtool源码 git clone http://git.kernel.or…

国家护网行动面试题总结

一、信息收集流程 1.获取域名的 whois 信息 , 获取注册者邮箱姓名电话等。 2.通过站长之家、明小子、 k8 、站长之家等查询服务器旁站以及子域名站点,因为主站一般 比较难,所以先看看旁站有没有通用性的 cms 或者其他漏洞。 3、通过 DNS 域传送…

PriorityQueue 阅读记录

1、前言 1、优先队列,底层通过数组来构造树(二叉树) 来实现的。 2、默认是最小堆(取出来的是最小值),可以通过传入一个比较器 comparator 来构造一个最大堆。 3、传入的参数不能为空,否则抛出NPE问题。 4、最大堆的…

Study--Oracle-07-ASM自动存储管理(一)

一、ASM实例和数据库实例对应关系 1、ASM是Oracle 10g R2中为了简化Oracle数据库的管理而推出来的一项新功能,这是Oracle自己提供的卷管理器,主要用于替代操作系统所提供的LVM,它不仅支持单实例,同时对RAC的支持也是非常好。ASM可…

汽车开发阶段(OTS/VFF/PVS/OS/SOP)

OTS:即英语中的Off Tooling Sample,通常被称为工装样件。它指的是通过配套设备、工装夹具以及模具制造出来的样品,但并不强调生产的时间效率,主要用于验证产品的设计能力。 VFF:在德语中表示为Vorserien Freigabefahr…

集成excel工具:自定义导入回调监听器、自定义类型转换器、web中的读、捕获文件格式转换错误ExcelDataConvertException

文章目录 I 封装导入导出1.1 定义工具类1.2 自定义读回调监听器: 回调业务层处理导入数据1.3 定义文件导入上下文1.4 定义回调协议II 自定义转换器2.1 自定义枚举转换器2.2 日期转换器2.3 时间、日期、月份之间的互转2.4 LongConverterIII web中的读3.1 使用默认回调监听器3.2…

C++基础知识:C++内存分区模型,全局变量和静态变量以及常量,常量区,字符串常量和其他常量,栈区,堆区,代码区和全局区

1.C内存分区模型 C程序在执行时,将内存大方向划分为4个区域 代码区:存放函数体的二进制代码,由操作系统进行管理的(在编译器中所书写的代码都会存放在这个空间。) 全局区:存放全局变量和静态变量以及常量 栈区:由编译器自动分…

Mysql具体数据操作和表的约束(上)

表中数据的增删改查 插入数据(添加数据) 1.按指定字段插入数据:insert into <表名> (字段1,字段2,...) values (),(),.... 注意1:values后面的括号是指行数(几条记录),一个括号表示插入一条记录,多个括号以此类推 注意2:values后面括号内部插入的数据…

【python学习】第三方库之pandas库的定义、特点、功能、使用场景和代码示例

引言 pandas是一个强大的Python库&#xff0c;用于数据分析和数据处理。它基于NumPy&#xff0c;提供了灵活的数据结构&#xff08;Series和DataFrame&#xff09;和数据操作功能&#xff0c;是数据科学和机器学习中不可或缺的工具 文章目录 引言一、安装pandas第三方库二、pan…

nginx反向代理实例

一. 准备工作 1.1 ngnix的安装 nginx基本概念和安装-CSDN博客 1.2 安装tomcat tomcat服务器是一个免费的开放源代码的Web应用服务器&#xff0c;属于轻量级应用服务器&#xff0c;适用于中小型系统和并发访问用户不是很多的情况。 前往官网网站&#xff1a;Apache Tomcat - Ap…

C++迈向精通:模板中的引用与remove_reference原理

remove_reference 原理 模板中的引用参数 在模板中&#xff0c;双 &‘ 会被解析为“引用”&#xff0c;这个“引用”可以是“左值”引用&#xff0c;也可以是“右值”引用。 例如&#xff1a; template <typename T> void func(T &&a) {std::cout <&l…

从零开始接触人工智能大模型,该如何学习?

人工智能是计算机科学领域中最具前瞻性和影响力的技术之一。它是一种智慧型算法&#xff0c;能够模拟人类的思维过程&#xff0c;处理大量的数据和信息&#xff0c;从而发现隐藏在其中的规律和趋势。人工智能的应用范围非常广泛&#xff0c;包括语音识别、图像识别、自然语言处…

《简历宝典》14 - 简历中“项目经历”,实战讲解,前端篇

上一节我们针对项目经历做了内功式的讲解&#xff0c;为了加深读者的印象&#xff0c;可以更轻松的套用到自己的简历上&#xff0c;本章继续从前端开发、Java开发以及软件测试的三个角度&#xff0c;再以校招和初级、中级以及高级三个维度分别入手&#xff0c;以实战讲解的形式…

gihub导入gitee仓库实现仓库同步

昨天在GitHub里导入了gitee仓库&#xff0c;但是在仓库同步这里卡了很久&#xff0c;因为网上大多数都是从github导入gitee&#xff0c;然后github生成token放入实现同步&#xff0c;但是我找到一种更为方便的&#xff01; 1.首先找到项目文件下的.git文件里的config文件 2.在…

Python实战MySQL之数据库操作全流程详解

概要 MySQL是一种广泛使用的关系型数据库管理系统,Python可以通过多种方式与MySQL进行交互。本文将详细介绍如何使用Python操作MySQL数据库,包括安装必要的库、连接数据库、执行基本的CRUD(创建、读取、更新、删除)操作,并包含具体的示例代码,帮助全面掌握这一过程。 准…

dom4j 操作 xml 之按照顺序插入标签

最近学了一下 dom4j 操作 xml 文件&#xff0c;特此记录一下。 public class Dom4jNullTagFiller {public static void main(String[] args) throws DocumentException {SAXReader reader new SAXReader();//加载 xml 文件Document document reader.read("C:\\Users\\24…

基于jeecgboot-vue3的Flowable流程支持bpmn流程设计器与仿钉钉流程设计器-编辑多版本处理

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、前端编辑带有仿钉钉流程的处理 /** 编辑流程设计弹窗页面 */const handleLoadXml (row) > {console.log("handleLoadXml row",row)const params {flowKey: row.key,ver…