Vue 中修改了计算属性(computed) 或者它的依赖变量,计算属性的值没有变化的几种情况

目录

第一种情况:直接修改计算属性

不生效举例 

解决方案1:直接修改依赖变量

 解决方案2:为计算属性设置 set 方法

 第二种情况:直接修改依赖数据

不生效举例

解决方案


第一种情况:直接修改计算属性

在Vue中,computed属性是用来声明计算属性的。计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值。因此,如果你尝试直接修改一个计算属性的值,这个修改是不会生效的。计算属性的值是由它们的函数逻辑计算得出的,而不是通过直接赋值来设置的。

不生效举例 

<template><div @click="changeRead">{{ readOnly }}</div>
</template>
<script>export default {data(){return {canRead:true}},computed:{readOnly(){return this.canRead}},methods:{changeRead(){//此时点击该方法 修改无效控制台还会出现警告信息this.readOnly = false}}}</script>

如果你希望修改一个计算属性的值并使其生效,你需要通过修改计算属性所依赖的数据来触发重新计算。只有当计算属性依赖的数据发生变化时,计算属性才会重新计算并更新值。 

解决方案1:直接修改依赖变量

 //这样会生效this.canRead = false

 解决方案2:为计算属性设置 set 方法

<template><div @click="changeRead">{{ readOnly }}</div>
</template>
<script>export default {data(){return {canRead:true}},computed:{readOnly:{get(){return this.canRead},set(val){//设置了set方法,可直接修改计算属性//在这里修改依赖数据this.canRead = val}}},methods:{changeRead(){//直接修改计算属性this.readOnly = false}}}</script>

 第二种情况:直接修改依赖数据

通过第一种情况我们知道了,要修改计算属性的值,必须要修改计算属性的依赖变量,但有一种情况及时修改了依赖变量的值,计算属性的值任然不会变化

不生效举例

<template><div @click="changeRead">{{ readOnly }}</div>
</template>
<script>export default {data(){return {canRead:true,readOnly:true,}},computed:{readOnly(){return this.canRead}},methods:{changeRead(){//修改计算属性的依赖变量this.canRead = false}}}</script>

原因就是因为在data中有与computed属性同名的变量 ,在vue中如果遇到同名变量data中的优先级会大于computed

解决方案

解决方案就是当你发现无论如何怎么修改计算属性的值都没有变化的时候,看一看data中或props中是否有跟计算属性同名的变量,这时候就要考虑是要删除该变量,还是改变计算属性的命名了。

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

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

相关文章

Java LeetCode篇-深入了解关于单链表的经典解法

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 移除链表元素 1.1 使用双指针方法 2.0 反转链表 2.1 递归法 2.2 头插法 3.0 链表中倒数第 k 个节点 3.1 递归法 3.2 快慢指针 4.0 合并两个有序链表 4.1 递归法 …

中小型项目 生成环境 JVM调优示例,详细参数解释

生成环境 jvm调优示例,详细参数解释 配置环境硬件条件:软件条件:JVM调优内存分配率调优:垃圾收集器选择和配置:线程数调优:调优工具和监控:总结配置详细列表配置脚本配置环境 硬件条件: 内存:8GB,系统需要至少4GB的可用内存来支持配置中设置的堆大小。处理器:8核,…

尝试用C++从实现一个可用的内存池

作者:令狐掌门 技术交流QQ群:675120140 csdn博客:https://mingshiqiang.blog.csdn.net/ 文章目录 基本实现增加内存对齐、无锁设计用C++实现一个高并发内存池是一个复杂的任务,涉及深入理解内存分配、并发控制、锁机制、以及系统的内存管理策略。此外,这通常需要与操作系统…

【Vue3】源码解析-响应式原理

【Vue3】源码解析 系列文章Proxy APIProxy和响应式对象reactiveref()方法运行原理 系列文章 【Vue3】源码解析-前置 【Vue3】源码解析-响应式原理 【Vue3】源码解析-虚拟DOM Proxy API 见上 Proxy和响应式对象reactive 在Vue 3中&#xff0c;使用响应式对象方法如下代码所…

【每日一题】1670. 设计前中后队列-2023.11.28

题目&#xff1a; 1670. 设计前中后队列 请你设计一个队列&#xff0c;支持在前&#xff0c;中&#xff0c;后三个位置的 push 和 pop 操作。 请你完成 FrontMiddleBack 类&#xff1a; FrontMiddleBack() 初始化队列。void pushFront(int val) 将 val 添加到队列的 最前面…

如何通过“闻香”给葡萄酒分类?

有句话叫做“闻香识女人”&#xff0c;葡萄酒也如同美女&#xff0c;千娇百媚风情万种&#xff0c;所以通过“闻香”也可以给葡萄酒进行分类。 那么&#xff0c;云仓酒庄的品牌雷盛红酒分享葡萄酒都有哪些不同的香呢&#xff1f; 云仓酒庄是云仓酒庄的结合&#xff0c;也就是在…

计算机网络(超详解!) 第二节 物理层(上)

1.物理层的基本概念 物理层考虑的是怎样才能在连接各种计算机的传输媒体上传输数据比特流&#xff0c;而不是指具体的传输媒体。 物理层的作用是要尽可能地屏蔽掉不同传输媒体和通信手段的差异。 用于物理层的协议也常称为物理层规程(procedure)。 2.物理层的主要任务 主要…

vivado产生报告阅读分析21

其他命令选项 • -of_objects <suggestion objects> &#xff1a; 启用特定建议的报告。在此模式下运行时 &#xff0c; report_qor_suggestions 不会生成新建议。此命令可快速执行 &#xff0c; 读取 RQS 文件后 &#xff0c; 此命令可用于查看其中包 含的建议。其…

Linux下各种字符编码进行转码

支持各种编码相互转换 具体 iconv --list 可以查看 支持的转码格式 1.代码实现 #include <iostream> #include <iconv.h> #include <cstring>int iconv_convert(const char *inCharset, const char *outCharset, char *inbuf, unsigned int inlen, char *o…

流程控制翻转学习

&#x1f4d1;前言 本文主要是【Python】——Python流程控制翻转学习的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每…

Leetcode49.字母异位词分组

忘了之前做哪家笔试题遇到过这个题&#xff0c;对哈希表一点印象都没有了&#xff0c;完全懵逼&#xff0c;虽然写出来自己感觉正确的代码了&#xff0c;但是代码太厚重了而且运行还出错了。今天正好在leetcode看见了写一下题解记录一下吧~ 题目描述 给你一个字符串数组&…

OSHI-操作系统和硬件信息库

文章目录 引言一、快速入门1.1 OSHI的简介1.2 引入依赖1.3 涉及的包&#xff08;package&#xff09;1.4 涉及的核心类 二、操作系统信息&#xff1a;OperatingSystem2.1 总揽2.2 文件系统信息&#xff1a;FileSystem2.3 网络参数信息&#xff1a;NetworkParams2.4 进程信息&am…

Docker,从入门到精通

1、DockerFile 介绍 dockerfile 是啥?dockerfile 用来构建 docker 镜像的文件。 具体步骤&#xff1a; 1、编写一个 dockerfile 文件 2、docker build 构造一个镜像 3、docker run 运行镜像 4、docker push 发布镜像 DockerFile 构建过程 1、每个保留关键字都必须是大…

WSDM 2024 | LLMs辅助基于内容的推荐系统增强BPR训练数据

本文提出了一种简单而有效的基于LLMs的图数据增强策略&#xff0c;称为LLMRec&#xff0c;以增强基于内容的推荐系统。LLMRec包含三种数据增强策略和两种去噪策略。数据增强策略包括从文本自然语言的角度挖掘潜在的协同信号, 构建用户画像(LLM-based), 并强化item side informa…

Adobe Illustrator绘图解决卡顿问题

最近在用AI做矢量图&#xff0c;但是遇到了一个很难搞的问题&#xff0c;当我们需要分辨率较高的图片的时候&#xff0c;Python用Matplotlib生成的pdf时dpi参数会设置为600及以上&#xff0c;但是样子的话就造成了pdf文件过大以及AI卡顿&#xff0c;比如&#xff0c;下午生成的…

opencv-python将一个图像中的倾斜矩形调整到方正的位置

要将一个倾斜的矩形物体调整为方正&#xff0c;可以使用OpenCV的cv2.warpPerspective函数进行透视变换。透视变换可以将一个平面上的点映射到另一个平面上。。 透视变换的步骤如下&#xff1a; 1.检测矩形的四个角点坐标。 2.根据四个角点坐标计算出变换矩阵。 3.使用cv2.warp…

DHCP协议与域名系统

计算机网络与协议&#xff1a; 1、DHCP协议 DHCP&#xff08;Dynamic Host Configuration Protocol&#xff0c;动态主机配置协议&#xff09;是一个用于局域网的网络协议&#xff0c;位于OSI模型的应用层&#xff0c;使用UDP协议工作&#xff0c;主要用于自动分配IP地址给用…

MongoDB 基础命令介绍

MongoDB 是一个开源、高性能、可扩展的文档数据库。与传统的关系型数据库不同&#xff0c;MongoDB 采用了非常灵活的文档模型&#xff08;BSON 格式&#xff09;&#xff0c;可以轻松地存储和查询各种类型的数据。在 MongoDB 中&#xff0c;我们可以使用一些基础命令来管理数据…

解码 SQL:深入探索 Antlr4 语法解析器背后的奥秘

探寻SQL的背后机制 前言 在数据领域&#xff0c;SQL&#xff08;Structured Query Language&#xff09;是一门广泛使用的语言&#xff0c;用于查询和处理数据。你可能已经使用过诸如MySQL、Hive、ClickHouse、Doris、Spark和Flink等工具来编写SQL查询。 每一种框架都提供了…

CZ‘s ID Card

描述 你有身份证吗?你必须在家庭户口簿上登记身份证号码。从身份证上你可以得到每个人的具体个人信息。这个数字有18位&#xff0c;前17位包含特殊含义:前6位代表你来自哪个地区&#xff0c;后8位代表你的生日。 这里是代表你所在地区的代码。 {{11,"Beijing"},{12,…