Vue中watch与计算属性computed

最近,写vue代码,判断父组件传来的type来作为条件判断,并用v-if v-else来控制页面展示。

起初用watch监听了type,发现值改变了,但是写在data配置项的visible属性书写错误,未实现响应式,如下:(这导致即使type改变了[数据改变了未驱动视图的改变])

  props: {businessObject: Object,type: String,idEditDisabled: {type: Boolean,default: true}},data() {return {elementBaseInfo: {},methodOptions: [],visible:false//典型的没有响应式// visible: this.type === 'StartEvent' || this.type === 'EndEvent'||this.type === 'Process'}},

问题与此博客类似:VUE中用props+计算属性/侦听器实现子组件监听父组件数据的变化_在子组件的计算属性监听props中的属性-CSDN博客

VUE中用props子组件监听父组件数据的变化
在不使用vuex的情况下,如何监听呢?

  • 一开始想的是在子组件里的data中重定义props中接收的数据,再通过methods中定义的方法来监听,发现不可行,data里重定义的数据并不会随着父组件传过来的数据的变化而变化
  • 后来用计算属性来监听data里重定义的数据,发现也不可以,于是放弃data的重定义。
  • 发现计算属性和侦听器都可以直接监听props里的属性

后面了解到用侦听器watch和计算属性computed解决了(其实大概也知道是这个原因,目前对响应式了解的仍然不够深透,等下再去了解一下哈)

watch侦听器

使用 watch 监听数据的主要原因是当数据发生变化时,能够触发相应的操作或逻辑。在 Vue.js 中,watch 是一种用来监测数据变化并执行相应处理逻辑的方法。使用 watch 可以监听指定的数据变化,并在数据变化时执行

watch: {// 监听数据的名称dataToWatch: {// 监听函数,当数据发生变化时执行handler(newValue, oldValue) {// 执行操作,newValue为新值,oldValue为旧值},// 是否立即触发监听函数,默认为false,即在数据变化之后才会执行监听函数immediate: true,// 深度监听对象内部属性的变化,默认为falsedeep: true}
}

watch选项中,dataToWatch是要监听的数据的名称,可以是响应式数据的任何属性,如data中的属性或props中传入的属性。handler是监听函数,当dataToWatch的值发生变化时被调用,参数newValue表示变化后的新值,oldValue表示变化前的旧值。immediate属性表示是否在初始化时立即执行监听函数,默认为false,即在数据变化之后才会执行监听函数。deep属性表示是否深度监听对象内部属性的变化,默认为false,即只监听对象的引用变化而不监听内部属性的变化。

  1. 监听对象或数组的变化: 默认情况下,Vue.js的watch选项只能监听数据的引用变化,而无法深度监听对象或数组内部属性的变化。如果要监听对象或数组内部属性的变化,需要将deep属性设置为true。

  2. 立即触发监听函数: 通过设置immediate属性为true,可以在组件初始化时立即触发监听函数,而不必等到数据变化后再执行监听函数。

  3. 监听多个数据watch选项还可以监听多个数据,可以将多个数据以对象的形式传入,并为每个数据设置对应的监听函数。

  4. 监听函数的执行: 监听函数在数据发生变化时被调用,可以在函数内部执行任何操作,如更新其他数据、发送网络请求等。

总之,watch选项提供了一种便捷的方式来监控数据的变化,并在数据变化时执行相应的操作,是Vue.js中非常常用的选项之一。

computed计算属性

在Vue.js中,computed 是一种特殊的属性,用于声明一个计算属性。计算属性的值是基于其他响应式数据的值计算而来的,并且具有缓存机制,只有依赖的响应式数据发生变化时,才会重新计算计算属性的值。以下是对computed的详细解释:

computed: {// 计算属性的名称computedProperty() {// 计算属性的计算逻辑return this.data1 + this.data2;}
}

computed选项中,可以声明一个计算属性,以键值对的形式进行声明。计算属性的键就是属性的名称,值是一个函数,用于计算属性的值。计算属性的值可以是对其他响应式数据的计算,也可以是对其他计算属性的引用。

  1. 计算属性的特点

    • 响应式:计算属性是响应式的,当依赖的响应式数据发生变化时,计算属性的值会自动更新。
    • 缓存:计算属性具有缓存机制,只有当依赖的响应式数据发生变化时,才会重新计算计算属性的值。如果依赖的响应式数据没有发生变化,则计算属性会返回之前缓存的值,避免不必要的重复计算。
  2. 计算属性与方法的区别: 虽然计算属性和方法都可以用于根据其他数据的值计算出新的数据,但它们之间有一些区别:

    • 缓存:计算属性具有缓存机制,而方法每次调用都会重新执行计算逻辑。
    • 调用方式计算属性像是数据属性一样被访问,而方法需要通过方法调用的方式来使用。
    • 响应式计算属性是响应式的,而方法不是,方法的返回值不会随依赖数据的变化而变化
  3. getter 和 setter: 计算属性可以使用 getter 和 setter 函数来自定义计算逻辑和处理属性的赋值操作。getter 函数用于获取计算属性的值,setter 函数用于处理计算属性的赋值操作。

    computed: {fullName: {get() {return this.firstName + ' ' + this.lastName;},set(newValue) {const parts = newValue.split(' ');this.firstName = parts[0];this.lastName = parts[1];}}
    }
    

总之,computed 选项提供了一种便捷的方式来声明计算属性,用于根据其他响应式数据的值计算出新的数据,并且具有缓存机制和响应式特性,是 Vue.js 中非常常用的选项之一。

最上面问题可以监听器或计算属性完成 

    // // watch配置项实现// type(newVal, oldVal){//   this.visible = newVal === 'StartEvent' || newVal === 'EndEvent'||newVal === 'Process'// }},computed:{computeVisible(){return this.type === 'StartEvent' || this.type === 'EndEvent'||this.type === 'Process'}},

 

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

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

相关文章

nodejs常用命令

序号命令名注释1clear 或者 cls 清空界面2ls/dir查看列表(list)3cd 目录名进入到目录中去4cd ..返回上一级目录5 cd \直接回到根目录 6CtrlC 停止 Node 程序7输入部分文件名后按下 Tab 键补全文件名 或 目录名, 多次tab会进行切换8 ↑ ↓ 上下箭头切换历史输…

基于wsl的Ubuntu20.04上安装桌面环境

在子系统Ubuntu20.04上安装桌面环境 1. 更换软件源 由于Ubuntu默认的软件源在国外,有时候后可能会造成下载软件卡顿,这里我们更换为国内的阿里云源,其他国内源亦可。 双击打开Ubuntu20.04 LTS图标,在命令行中输入 # 备份原来的软…

索尼相机照片清理软件

在使用索尼相机拍摄照片的时候有时我们需要同时拍摄JPG格式和RAW格式,这在后期选图的时候给我们带来一些麻烦。我们固然可以选用Br来管理照片,但是现在我们可以有一个更轻量的软件(8.8MB)来做到一部分功能。 我们将照片从SD卡导出…

docker安装mysql和nacos集群加nginx代理

安装mysql nacos 1、拉取mysql镜像 docker pull mysql:8.0.272、定义挂载目录 在/home/mysql目录下新建两个文件夹,一个叫data另一个叫conf 命令形式: mkdir -p /home/mysql/{data,conf}3、配置my.cnf(my.ini) vim /home/my…

AI推介-大语言模型LLMs论文速览(arXiv方向):2024.03.31-2024.04.05

文章目录~ 1.AutoWebGLM: Bootstrap And Reinforce A Large Language Model-based Web Navigating Agent2.Training LLMs over Neurally Compressed Text3.Unveiling LLMs: The Evolution of Latent Representations in a Temporal Knowledge Graph4.Visualization-of-Thought …

Java(二)面向对象进阶

目录 面向对象 多态性 向下转型 Object equals() toString() clone() finalize() Static 单例模式 代码块 final 抽象类与抽象方法(或abstract关键字) 接口 接口的多态性 接口的默认方法 内部类 成员内部类 局部内部类 枚举类 实现接口的枚举类 …

网络安全流量平台_优缺点分析

FlowShadow(流影),Ntm(派网),Elastiflow。 Arkimesuricata,QNSMsuricata,Malcolm套件。 Malcolm套件优点:支持文件还原反病毒引擎(clamav/yara)…

IntelliJ IDEA 2024.1 更新亮点汇总:全面提升开发体验

IntelliJ IDEA 2024.1 更新亮点汇总:全面提升开发体验 文章目录 IntelliJ IDEA 2024.1 更新亮点汇总:全面提升开发体验摘要引言 IntelliJ IDEA 2024.1 的新增功能主要亮点全行代码完成 最终的支持 Java 22 功能新航站楼 贝塔编辑器中的粘滞线 人工智能助…

【SpringBoot3】SpringBoot入门

需求&#xff1a;使用 SpringBoot 开发一个web应用&#xff0c;浏览器发起请求 /hello后&#xff0c;给浏览器返回字符串 “hello world "。 步骤 ①. 创建Maven工程 ②. 导入spring-boot-stater-web起步依赖 <dependency> <groupId>org.springframework…

React18从入门到实战

文章目录 一、React环境的搭建二、项目文件的介绍&#xff08;1&#xff09;package.json&#xff0c;他是项目存放依赖包的地方&#xff0c;里面包括了一些项目核心包及下载的其他插件包&#xff08;2&#xff09;src文件夹是项目源码目录&#xff0c;平时开发页面就在其中&am…

linux 用户组与附加组

用户和用户组 查看用户 cat /etc/passwdroot:x:0:0:root:/root:/bin/bash用户名&#xff08;例如 root&#xff09; 密码占位符&#xff08;通常是 x&#xff0c;表示密码存储在 /etc/shadow 文件中&#xff09; 用户 ID&#xff08;UID&#xff09; 组 ID&#xff08;GID&am…

Leetcode 581. 最短无序连续子数组

心路历程&#xff1a; 本以为这道题要用动态规划求解&#xff0c;因为题目中这几个关键字与动态规划太匹配了&#xff0c;结果想了半天也没发现dp(i)和dp(i-1)的递推关系。 这道题本意考察双指针的做法&#xff0c;也可以用排序后做比较的方式来做。 注意的点&#xff1a; 1…

修电机所需要的基本工具

等距式 模具 同心式模具 电机划线刀 压脚 千分尺 -----测量线径 钳形电流表------- 测量 空载 满载下的电流值 摇表&#xff0c; 测量线圈是否碰到外壳 指针式万用表 胶锤 整理线圈 绝缘纸和青稞纸&#xf…

服务器主机安全受到危害的严重性

为了让小伙伴们了解到服务器主机安全受到危害的严重性&#xff0c;以下详细说明一下&#xff1a;1. 数据泄露&#xff1a;如果服务器主机遭受攻击&#xff0c;攻击者可能会窃取敏感数据&#xff0c;如用户数据、商业秘密、机密文件等&#xff0c;导致数据泄露和商业机密的泄漏。…

设计模式深度解析:AI大模型下的策略模式与模板方法模式对比解析

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL应用》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 策略模式与模板方法模式对比解析 文章目录 &#x1f31f;引言&#x1f31f;Part 1:…

提取mp4中的音频Pkt,以adts的方式写为aac文件

提取mp4文件中的音频pkt&#xff0c;加上adts头写入到文件中&#xff08;位运算的方式&#xff09; /*****************************************************************//*** \file writeAAC01.cpp* \brief 提取出mp4文件中的音频包&#xff0c;加上adts_header, 写入到…

【单源最短路 图论】882. 细分图中的可到达节点

作者推荐 视频算法专题 本文涉及知识点 单源最短路 图论 LeetCode 882. 细分图中的可到达节点 给你一个无向图&#xff08;原始图&#xff09;&#xff0c;图中有 n 个节点&#xff0c;编号从 0 到 n - 1 。你决定将图中的每条边 细分 为一条节点链&#xff0c;每条边之间…

Spring Security——11,自定义权限校验方法

自定义权限校验方法 一键三连有没有捏~~ 我们也可以定义自己的权限校验方法&#xff0c;在PreAuthorize注解中使用我们的方法。 自定义一个权限检验方法&#xff1a; 在SPEL表达式中使用 ex相当于获取容器中bean的名字未ex的对象。然后再调用这个对象的 hasAuthority方法&am…

hadoop分布式计算组件

什么是计算、分布式计算&#xff1f; 计算&#xff1a;对数据进行处理&#xff0c;使用统计分析等手段得到需要的结果 分布式计算&#xff1a;多台服务器协同工作&#xff0c;共同完成一个计算任务 分布式计算常见的2种工作模式 分散->汇总(MapReduce就是这种模式)中心调…

【Linux系列】如何确定当前运行的是 RHEL 9 还是 RHEL 8?

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…