vue3中 watch、watchEffect区别

  • watch是惰性执行,也就是只有监听的值发生变化的时候才会执行,但是watchEffect不同,每次代码加载watchEffect都会执行(忽略watch第三个参数的配置,如果修改配置项也可以实现立即执行)
  • watch需要传递监听的对象,watchEffect不需要
  • watch只能监听响应式数据:ref定义的属性和reactive定义的对象,如果直接监听reactive定义对象中的属性是不允许的(会报警告),除非使用函数转换一下。其实就是官网上说的监听一个getter
  • watchEffect如果监听reactive定义的对象是不起作用的,只能监听对象中的属性
let obj = reactive({text:'hello'
})
watchEffect(()=>{console.log('触发了watchEffect');console.log(obj.text);
})
let obj= reactive({text:'hello'
})
// watch是惰性执行, 默认初始化之后不会执行,只有值有变化才会触发,可通过配置参数实现默认执行
watch(obj, (newValue, oldValue) => {// 回调函数console.log('触发监控更新了new',  newValue);console.log('触发监控更新了old',  oldValue);
},{// 配置immediate参数,立即执行,以及深层次监听immediate: true,deep: true
})

如果定义了reactive的数据,想去使用watch监听数据改变,则无法正确获取旧值,并且deep属性配置无效,自动强制开启了深层次监听。

如果使用 ref 初始化一个对象或者数组类型的数据,会被自动转成reactive的实现方式,生成proxy代理对象。也会变得无法正确取旧值。

用任何方式生成的数据,如果接收的变量是一个proxy代理对象,就都会导致watch这个对象时,watch回调里无法正确获取旧值。

所以当大家使用watch监听对象时,如果在不需要使用旧值的情况,可以正常监听对象没关系;但是如果当监听改变函数里面需要用到旧值时,只能监听 对象.xxx`属性 的方式才行

回答范例

  1. watchEffect立即运行一个函数,然后被动地追踪它的依赖,当这些依赖改变时重新执行该函数。watch侦测一个或多个响应式数据源并在数据源变化时调用一个回调函数
  2. watchEffect(effect)是一种特殊watch,传入的函数既是依赖收集的数据源,也是回调函数。如果我们不关心响应式数据变化前后的值,只是想拿这些数据做些事情,那么watchEffect就是我们需要的。watch更底层,可以接收多种数据源,包括用于依赖收集的getter函数,因此它完全可以实现watchEffect的功能,同时由于可以指定getter函数,依赖可以控制的更精确,还能获取数据变化前后的值,因此如果需要这些时我们会使用watch
  3. watchEffect在使用时,传入的函数会立刻执行一次。watch默认情况下并不会执行回调函数,除非我们手动设置immediate选项
  4. 从实现上来说,watchEffect(fn)相当于watch(fn,fn,{immediate:true})

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

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

相关文章

【精选】Spring整合MyBatis,Junit 及Spring 事务Spring AOP面向切面详解

Spring整合MyBatis 搭建环境 我们知道使用MyBatis时需要写大量创建SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession等对象的代码,而Spring的作用是帮助我们创建和管理对象,所以我们可以使用Spring整合MyBatis,简化MyBatis开发。 …

SDK emulator directory is missing

要进行uniapp真机测试,不得不安装配置一下安卓开发环境 ,搞一个模拟器。。。然后又是各种坑。。对比来对比去还是IOS的环境使用着舒服,XCODE下载好,一切重点就是在编码了。。 安卓这个脑残货呀,哎,各种安装…

记录 | rm -rf 删除除了指定文件以外的文件,以及在Bash脚本中的使用方法

一般 rm -rf 的用法是: # 删除当前目录所有文件 rm -rf ./*但要是想删除当前目录除了 aa.txt以外的其他所有文件呢,该怎么办呢? 命令如下: rm -rf !(aa.txt)然而这个时候可能会报错: bash: !: event not found 这是因…

rust 基本数据类型

Rust 是 静态类型(statically typed)语言,也就是说在编译时就必须知道所有变量的类型,基本类型如下 整型 整数 是一个没有小数部分的数字长度有符号无符号8-biti8u816-biti16u1632-biti32u3264-biti64u64128-biti128u128archisi…

【开题报告】基于SSM的高端茶具选购系统的设计与实现

1.选题背景 近年来,随着人们生活水平的提高以及对健康生活的追求,茶文化逐渐在人们的生活中占据了重要地位。茶具作为茶文化的重要组成部分,对于制茶、品茶都有着至关重要的影响。因此,如何选购合适的高端茶具成为了越来越多茶友…

数据挖掘之时间序列分析

一、 概念 时间序列(Time Series) 时间序列是指同一统计指标的数值按其发生的时间先后顺序排列而成的数列(是均匀时间间隔上的观测值序列)。 时间序列分析的主要目的是根据已有的历史数据对未来进行预测。 时间序列分析主要包…

whatsapp信息群发脚本开发!

WhatsApp 作为全球广受欢迎的通讯应用,在我们的日常生活中扮演着重要角色,有时候,我们需要向大量联系人发送消息,比如营销推广、活动通知等。 一个个手动发送消息?那简直太落后了!今天,我们将探讨如何利用脚本开发实…

centos nginx安装及常用命令

nginx配置文件位置 nginx 安装有两种方式一种是联网一键下载,Nginx 配置文件在 /etc/nginx 目录下,一种是源码包可以无网下载,有两个配置文件启动地方一个是安装包存放位置,一是/usr/local/nginx/conf下,启动要看你…

MxL3706-AQ-R 2.0通道绑定同轴网络集成电路特性

MxL3706-AQ-R是Max线性公司的第三代MoCA2.0同轴网络控Z器SoC,可用于在现有的家庭同轴电缆上创建具有千兆位吞吐量性能的家庭网络。 该MxL3706-AQ-R工作在400MHz至1675MHz之间的无线电频率,并与satellite共存,电X和有线电视运营商的频率计划。…

前端:HTML鼠标样式及其对应的CSS属性值

1、默认箭头样式: selector {cursor: default; } 2、手型样式 selector {cursor: pointer; } 3、文本选择样式: selector {cursor: text; } 4、移动手型样式: selector {cursor: move; } 5、缩放手型样式: selector {cur…

Nginx 实现动静资源分离和负载均衡

1、相关概念 静态资源 .html .jpg .css .js等,没有后台数据库,不含程序(如php、jsp、asp等)的网页 动态资源 需要访问数据库的资源都属于动态资源 静态请求 用户发起的请求只访问到前端资源,不访问数据库 动态请求…

利用pytorch实现卷积形式的ResNet

利用pytorch实现卷积形式的ResNet 1. 导入必需的库2. 定义残差块3. 构建 ResNet 网络4. 实例化网络和训练 要使用 PyTorch 实现卷积形式的 ResNet(残差网络),你需要遵循几个主要步骤。首先,让我们概述 ResNet 的基本结构。ResNet …

让 OpenAI GPT4 出 10 道题测试其他开源大语言模型

让 OpenAI GPT4 出 10 道题测试其他开源大语言模型 1. 中文题目及答案2. 日文题目及答案3. 英文题目及答案 1. 中文题目及答案 数学题:一个矩形的长是10厘米,宽是5厘米,求它的面积。 答案:面积 长 x 宽 10厘米 x 5厘米 50平方厘…

金属款超声波风速风向传感器的创新与科技力量

在当今的科技世界中,WX-WQX2S 金属款超声波风速风向传感器以其独特的功能和可靠的性能,引领着气象科技领域的新潮流。这款传感器利用超声波技术,对风速和风向进行高精度测量,为气象学家和环境监测机构提供了强大的工具。 一、金属…

基于STM32单片机的智能家居系统设计(论文+源码)

1.系统设计 基于STM32单片机的智能家居系统设计与实现的具体任务: (1)可以实现风扇、窗帘、空调、灯光的开关控制; (2)具有语音识别功能,可以通过语音控制家电; (3&a…

图面试专题

一、概念 和二叉树的区别:图可能有环 常见概念 顶点(Vertex): 图中的节点或点。边(Edge): 顶点之间的连接线,描述节点之间的关系。有向图(Directed Graph)&…

精密制造ERP系统包含哪些模块?精密制造ERP软件是做什么的

不同种类的精密制造成品有区别化的制造工序、工艺流转、品质标准、生产成本、营销策略等,而多工厂、多仓库、多车间、多部门协同问题却是不少精密制造企业遇到的管理难题。 有些产品结构较为复杂,制造工序繁多,关联业务多,传统的…

spring源码

一、doScan包扫描 流程图 包扫描 protected Set<BeanDefinitionHolder> doScan(String... basePackages) {Assert.notEmpty(basePackages, "At least one base package must be specified");Set<BeanDefinitionHolder> beanDefinitions new LinkedHash…

深度学习实现语义分割算法系统 - 机器视觉 计算机竞赛

文章目录 1 前言2 概念介绍2.1 什么是图像语义分割 3 条件随机场的深度学习模型3\. 1 多尺度特征融合 4 语义分割开发过程4.1 建立4.2 下载CamVid数据集4.3 加载CamVid图像4.4 加载CamVid像素标签图像 5 PyTorch 实现语义分割5.1 数据集准备5.2 训练基准模型5.3 损失函数5.4 归…

Python+requests+unittest+excel搭建接口自动化测试框架

一、框架结构&#xff1a; 工程目录 代码&#xff1a;基于python2编写 二、Case文件设计 三、基础包 base 3.1 封装get/post请求&#xff08;runmethon.py&#xff09; import requests import json class RunMethod:def post_main(self,url,data,headerNone):res Noneif h…