拒绝废话: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,一经查实,立即删除!

相关文章

javascript this

js中的this有四种执行情况 作为构造函数执行 function Constructer (name) {this.name name; } const construct new Constructer(测试); console.log(construct.name); //思考一下new的过程中发生了什么?作为对象函数执行 const obj {name: 测试,logs: funct…

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个区域 代码区:存放函数体的二进制代码,由操作系统进行管理的(在编译器中所书写的代码都会存放在这个空间。) 全局区:存放全局变量和静态变量以及常量 栈区:由编译器自动分…

vue3中的props和emit

首先我们要明确props和emit是在父子组件(嵌套组件)中使用的 。 想要在父组件中渲染出子组件里的内容,需要在父组件中导入子组件,并在模板中渲染子组件。 那父子组件中如何通信呢?就需要使用到props和emit。 props 当子组件要接受父组件传递的数据信息时,也可以说是父…

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++初阶知识——类和对象(下)

目录 1.构造函数深入 2.类型转换 3.static成员 4.友元 5.内部类 6.匿名对象 7.对象拷⻉时的编译器优化 1.构造函数深入 &#xff08;1&#xff09;前我们实现构造函数时&#xff0c;初始化成员变量主要使⽤函数体内赋值&#xff0c;构造函数初始化还有⼀种⽅式&#x…

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

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

conda 环境打包与使用

conda 环境导出 使用 Conda 打包环境&#xff0c;可以创建一个可重复使用的环境文件&#xff0c;便于在不同的机器上重新创建相同的环境。以下是具体的步骤&#xff1a; 1. 创建 Conda 环境 如果你还没有创建一个 Conda 环境&#xff0c;可以使用以下命令创建一个新环境&…

Unsloth 微调 Llama 3

本文参考&#xff1a; https://colab.research.google.com/drive/135ced7oHytdxu3N2DNe1Z0kqjyYIkDXp 改编自&#xff1a;https://blog.csdn.net/qq_38628046/article/details/138906504 文章目录 一、项目说明安装相关依赖下载模型和数据 二、训练1、加载 model、tokenizer2、…

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

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