Vue3中的computed,watch和watchEffect的特点

1.computed
1)computed拥有缓存性,多次调用会直接从缓存中获取,而不会重新执行,只有相依赖的数据发生改变才会重新计算,所以说computed性能很高。
例:下面是同时调用三次计算属性firstTotal和三次函数firstTotalFun()的运行结果。可以发现,函数被执行了三次,而计算属性只被执行了一次。
在这里插入图片描述
代码:

<template><view class="container"><view class="item"><view>商品:</view><input type="text" v-model="firstGoods"></view><view class="item"><view>价格:</view><input type="text" v-model="firstPrice"></view><view class="item"><view>数量:</view><input type="text" v-model="firstNum"></view><view class="item"><view>总价格:</view><view>{{firstTotal}}, {{firstTotalFun()}}</view><view>{{firstTotal}}, {{firstTotalFun()}}</view><view>{{firstTotal}}, {{firstTotalFun()}}</view></view></view>
</template>
<script setup>
import { computed,ref } from 'vue';
let firstNum = ref(0)
let firstGoods = ref('')
let firstPrice = ref(0)
//计算属性
const firstTotal = computed(()=>{console.log("computed调用了");return firstPrice.value*firstNum.value})//普通函数
const firstTotalFun = ()=>{console.log("Function调用了")return firstPrice.value*firstNum.value
}
</script>

2)computed是只读的,不要去修改它,会报警告。
结果:
在这里插入图片描述
代码:
在这里插入图片描述
3)computed只能进行同步操作
4)computed在页面初始化加载的时候就会被立刻调用
5)必须要有返回值(return),如果代码只有一行也可以使用简写。

//正常写法
const firstTotal = computed(()=>{return firstPrice.value*firstNum.value})
//简写
const firstTotal = computed(()=>firstPrice.value*firstNum.value)

2.watch
1)watch可以监听到前一次的值和最新值。
结果:
在这里插入图片描述
代码:

let firstWatch = ref(0);
watch(firstWatch, (newValue,oldValue)=>{console.log("调用了watch:",newValue,oldValue)
});

2)如果需要监听对象类型具体属性的变化,需要设置deep:true,或者使用 “对象.value”。如下:

let goods = ref({name:'',price:0,num:0});
//法一:
watch(goods, (newValue,oldValue)=>{console.log("调用了watch:",newValue,oldValue)
},{deep:true});
//法二:
watch(goods.value, (newValue,oldValue)=>{console.log("调用了watch:",newValue,oldValue)
};

运行结果:
在这里插入图片描述
3)watch属性可以使用异步。(call一些api)
4) watch在页面初始化加载的时候不会被立刻调用,只有在监听的数据发生变化的时候才会调用。如果想要让他立刻调用可以添加immediate: true

watch(source,(newValue, oldValue) => {// 初始化的时候执行,且当 `source` 改变时再次执行},{ immediate: true }
)
  1. watchEffect
    1)watchEffect资料上说不需要指定具体属性,只要是watchEffect里面使用的数据,都可以进行深层次的监听(可以监听到对象中每个属性的变化)。但是经过测试,发现只会监听使用到的对象的具体的属性,如下图代码,我在watchEffect方法中打印了goods.value和goods.value.name,但只有当我在name输入框中输入数据的时候才会出现打印结果,price,和num输入框都无法触发监听。不知为啥,欢迎交流。
let goods = ref({name:'',price:0,num:0});
watchEffect(()=>{console.log("调用了watchEffect",goods.value.name,goods.value)
})

在这里插入图片描述
2) 可以进行异步操作
3)在页面初始化加载的时候会被立刻调用,与watch的immediate类似。

补充:
computed是多对一,一般多个属性变化,会影响到一个属性的时候用computed。computed不可以使用异步。
watch是一对多,一般有一个属性变化,会影响到多个数据的时候使用watch。watch可以使用异步。

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

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

相关文章

扬帆出海扩规模,仍是比亚迪未来的发展关键?

又到了新能源车企公布阶段性成果的时期。 日前&#xff0c;乘联会预估2024年3月全国新能源乘用车厂商批发销量82万辆&#xff0c;同比增长33%&#xff0c;环比增长84%。其中&#xff0c;比亚迪继续领跑&#xff0c;3月销量超30万辆&#xff0c;环比增长147.8%&#xff0c;而这…

ABAP 的 AT NEW 语法

AT NEW一般用在LOOP里面。 当我们在LOOP里面处理数据的时候&#xff0c;经常要执行的是当一个字段值改变了&#xff0c;然后我们怎么怎么做。这个就是要用AT NEW。其实有点像分组。 解释起来就是&#xff0c;我有一个内表itab里面有很多行数据&#xff0c;我现在一条一条的lo…

简单用Nodejs + express 编写接口

文章目录 get接口示范post接口示范注意点 准备工作可以看上一篇文章&#xff1a;文章链接》》 get接口示范 app.get(/, (req, res) > {res.send("Hello World"); })因为是get接口&#xff0c;所以可以直接在浏览器上请求&#xff08;端口地址接口名&#xff09;…

测开面经(Git经典题目,Git入门)

1. GitHub是什么 a. Git是一个分布式版本控制系统&#xff0c;作用是跟踪、管理和协调软件开发项目中的代码更改。 b. 提供了一种有效的方式来管理代码的版本历史&#xff0c;以及多人协作开发的能力。 2. Git的作用有哪些 a. 版本控制&#xff1a;Git可以记录每次代码更改的…

基于51单片机轮胎胎压监测系统—数码管显示

基于51单片机轮胎胎压监测系统 &#xff08;仿真&#xff0b;程序&#xff0b;设计报告&#xff09; 功能介绍 具体功能&#xff1a; 1.MPX4115压力传感器胎压检测&#xff1b; 2.ADC0832进行模数转换后&#xff0c;51单片机处理控制&#xff1b; 3.数码管显示胎压&#xff…

想要品牌传播有效,先清楚这三个本质问题

在互联网时代&#xff0c;企业想要提高市场竞争力就需要做好品牌传播。然而有许多企业在做品牌传播时都会踩坑&#xff0c;原因是因为忽视了这三点&#xff0c;接下来就让媒介盒子和大家分享&#xff1a; 一、 文案本质是“购买理由” 在文案技巧中经常会出现一些词&#xff…

1. TypeScript: JavaScript 的超集,为大型应用而生

引言 在现代的前端开发领域&#xff0c;JavaScript 无疑是一门极其流行的语言。然而&#xff0c;随着前端项目的日益复杂&#xff0c;JavaScript 本身的一些特性使得维护和扩展大型代码库变得困难。这就是 TypeScript 应运而生的背景。TypeScript 是一种由微软开发的开源语言&…

java中如何使用Rabbitmq?

1、添加相关的依赖 在Java中使用RabbitMQ&#xff0c;你需要先确保RabbitMQ服务器已经安装并运行在你的机器上或者某个服务器上。然后&#xff0c;你需要在Java项目中添加RabbitMQ的Java客户端库作为依赖。对于Maven项目&#xff0c;你可以在pom.xml文件中添加以下依赖&#x…

SSL的起源和发展史

随着网络技术的发展&#xff0c;当前各大浏览器厂商都对尚未使用SSL证书&#xff0c;切换到HTTPS的网站做了风险预警。SSL证书的如此重要&#xff0c;你了解SSL证书的诞生和发展史吗&#xff1f;跟随本文一起来了解SSL的前世今生。 SSL协议的诞生 Netscape&#xff08;网景通…

uniapp 表单使用Uview校验 包括城市选择器

<view><!-- 注意&#xff0c;如果需要兼容微信小程序&#xff0c;最好通过setRules方法设置rules规则 --><u--form labelPosition"left" :model"model1" :rules"rules" ref"uForm" labelWidth"174"><u…

Python中csr_matrix的两种初始化方法

本文以csr_matrix为例来说明sparse矩阵的使用方法&#xff0c;其他类型的sparse矩阵可以参考https://docs.scipy.org/doc/scipy/reference/sparse.html csr_matrix是Compressed Sparse Row matrix的缩写组合&#xff0c;下面介绍其两种初始化方法 csr_matrix((data, (row_ind…

concat() 函数

concat(某一具体的值或数组对象) 作用&#xff1a;将括号里的内容连接在一起注意&#xff1a; &#xff08;1&#xff09;多个具体的值或数组对象用逗号隔开 &#xff08;2&#xff09;select 语句返回的结果也是个数组&#xff0c;所以 select 语句可以写在 concat 函数的括号…

【操作系统】-寄存器-具有记忆功能的元器件

为什么要使用寄存器 现代电子计算机用二进制来表示数字&#xff0c;人类发明了触发器&#xff0c;每个触发器可以保存1比特&#xff0c;为了保存一个较大的二进制数&#xff0c;组合一起就是新的元器件&#xff0c;称为寄存器&#xff08;register&#xff09;&#xff0c;或者…

Python读取文件里内容

如果要读取一个文件里的内容是 # 文件名&#xff1a;db.txt 1 2 3 4代码如下 import requests f open("db.txt", mode"rb") content f.read() f.close()data content.decode(utf-8)# 存到 list 里 data_list data.split(\r\n) print(data_list)# 结果…

Docker-部署、镜像容器管理、commit

安装部署 一、查询版本信息 命令说明docker version查看服务器与客户端版本docker info查看docker服务配置信息 二、安装部署 官网地址&#xff1a;Install Docker Engine | Docker Docs 1、卸载旧的版本 sudo yum remove docker \docker-client \docker-client-latest \…

MySQL-7.mysql约束

约束用于确保数据库中的数据满足特定的商业规则。 MySQL约束包含五种&#xff1a;not null、unique、primary key、foreign key、check 7.1 primary key 主键 字段名 字段类型 primary key 用于唯一的标识表的行数据&#xff0c;当定义主键约束后&#xff0c;该列不能重复。 pr…

力扣经典150题第九题:跳跃游戏

目录 1. 简介2. 问题描述3. 解题思路方法一&#xff1a;贪心算法 4. 算法实现方法一&#xff1a;贪心算法 5. 示例与测试6. 总结与展望7. 结语 1. 简介 本篇博客将讨论力扣经典150题中的跳跃游戏问题。给定一个非负整数数组 nums&#xff0c;数组中的每个元素代表在该位置可以…

perl 交叉编译

前言 Perl是一种高级、通用、解释型、动态的编程语言。Perl设计的初衷是为了更好地处理文本处理任务&#xff0c;但随着时间的发展&#xff0c;现在它已经变成了一种强大的一般目的编程语言。Perl支持面向过程和面向对象的编程风格。 Perl的特点&#xff1a; 强大的字符串处…

ROC与决策树介绍

ROC与决策树介绍 一、ROC介绍 ROC&#xff08;Receiver Operating Characteristic&#xff09;曲线&#xff0c;即受试者工作特征曲线&#xff0c;是一种用于评估二元分类器性能的工具。ROC曲线起源于信号检测理论&#xff0c;后来被广泛用于机器学习和统计学习中的分类问题。…

第十课 Excel

最上方标题栏&#xff1a; 显示共工作薄名称&#xff0c;如果显示兼容模式是没有办法使用高级功能的。分辨高版本和低版本可以通过后缀名进行分辨&#xff1b;显示xlsx就是高版本工作薄&#xff0c;如果显示xls的话就是低版本工作薄了。如果同事老板都使用的是低版本的话我们发…