Vue computed属性原理及其惰性求值特点

1,computed属性

在 Vue.js 中, computed  属性是 Vue 响应式系统的一个核心特性,它允许开发者声明式地描述一个依赖其他响应式属性的计算值。 computed  属性是基于它们的依赖进行缓存的,只有当依赖发生变化时,它们才会重新计算。这种机制极大地提高了性能,尤其是在处理复杂数据结构或频繁计算时。
computed 属性特点:
响应式:当依赖的数据发生变化时,computed 属性会自动重新计算。
缓存computed属性会缓存计算结果,只有当依赖的数据发生变化时,才会重新计算。
惰性求值computed属性在首次访问时才会进行计算,之后会根据依赖数据的变化情况决定是否重新计算。
注意:
1,computed 的属性应该是只读的一旦在模板中使用了计算属性,就不应该在组件中修改它的值。如果需要修改,可以将其转换为一个方法。
2, computed 可以返回一个函数。这在需要在模板中使用函数式编程时很有用。例如,你可以使用  v-for 指令来循环执行一个函数,并返回一组结果。
3, computed 不需要加小括号computed可以向普通属性一样,直接使用,不需要额外加小括号调用。
4, computed惰性求值,即计算的值不渲染使用的话,是不会计算的。这个使用可以括在模版中使用,或者在函数中被使用。

2,computed例子解析

例子:
var vm = new Vue({
data: {
firstName: 'John',
lastName: 'Doe'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
});
fullName  是一个  computed  属性,它不需要再被data中定义,可以直接使用this.fullName在函数中使用,或者直接使用 fullName  在模版中渲染。
fullName  的计算结果会被缓存起来, 它依赖于  firstName    lastName 只要计算属性所依赖的属性发生变化,计算属性就会重新执行,视图也会更新。即   firstName    lastName  变化时, fullName  会自动重新计算。
另外,因为惰性计算原理,如果 fullName  没有被使用,是不会被计算的。

3,我的使用:

我的代码中是这样使用的:
data:function(){
return{form:{ name:"",table_name:"",idc:"",}
}
},
computed:{from_name() {console.log("计算form_name")var formname=this.form.table_name + '启动机房:' + this.form.idcthis.$set(this.form,'name',formname)return formname;}
},
定义了 computed属性from_name,依赖data模块中定义的form对象,form对象的table_name属性和idc属性。计算后赋值给form.name属性。实现了统计table_name和idc属性来计算得到name属性的目的。
我的使用位置是在模版中展示名称from_name
<el-form-item label="计划名称"><el-input v-model="from_name" :disabled="true"></el-input>
</el-form-item>
虽然 from_name属性的值并不是我们的最终目的,但是form_name必须得到使用才能完成整个计算得到form.name,否则依据惰性计算原理,form.name不会得到结果。

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

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

相关文章

sunrays-framework 微调

文章目录 1.common-log4j2-starter 动态获取并打印日志存储的根目录的绝对路径以及应用的访问地址1.目录2.log4j2.xml 配置LOG_HOME3.LogHomePrinter.java 配置监听器4.spring.factories 注册监听器5.测试1.common-log4j2-starter-demo 配置2.启动测试 2.common-minio-starter …

ElasticSearch上

安装ElasticSearch Lucene&#xff1a;Java语言的搜索引擎类库&#xff0c;易扩展&#xff1b;高性能&#xff08;基于倒排索引&#xff09;Elasticsearch基于Lucene&#xff0c;支持分布式&#xff0c;可水平扩展&#xff1b;提供Restful接口&#xff0c;可被任何语言调用Ela…

element-ui textarea备注 textarea 多行输入框

发现用这个组件&#xff0c;为了给用户更好的体验&#xff0c;要加下属性 1. 通过设置 autosize 属性可以使得文本域的高度能够根据文本内容自动进行调整&#xff0c;并且 autosize 还可以设定为一个对象&#xff0c;指定最小行数和最大行数。:autosize"{ minRows: 3, ma…

.netframwork模拟启动webapi服务并编写对应api接口

在.NET Framework环境中模拟启动Web服务&#xff0c;可以使用几种不同的方法。一个常见的选择是利用HttpListener类来创建一个简单的HTTP服务器&#xff0c;或者使用Owin/Katana库来自托管ASP.NET Web API或MVC应用。下面简要介绍Owin/Katana示例代码。这种方法更加灵活&#x…

路由环路的产生原因与解决方法(1)

路由环路 路由环路就是数据包不断在这个网络传输&#xff0c;始终到达不了目的地&#xff0c;导致掉线或者网络瘫痪。 TTL &#xff08;生存时间&#xff09;&#xff1a;数据包每经过一个路由器的转发&#xff0c;其数值减1&#xff0c;当一个数据包的TTL值为0是&#xff0c;路…

Android CustomTextField

在 Compose 中开发用户界面时&#xff0c;需要处理输入框和键盘的交互&#xff0c;例如在键盘弹出时调整布局位置&#xff0c;避免遮挡重要内容。本篇博客将通过一个完整的示例展示如何实现这一功能。 功能概述 本例实现了一个简单的输入框。当输入框获得焦点或输入文字时&…

Alluxio数据流转方案在联通智网的应用

分享嘉宾 陈得泳 - 中国联通大数据平台 SRE 工程师&#xff0c;致力于基于开源生态构建稳定、高效、安全、低成本的大数据集群。 观看完整分享回放 业务背景 统一底座和安全基座位于不同IDC&#xff1b;统一底座&#xff1a;承接 O 域全域网络数据&#xff0c;包括移动网信…

搜维尔科技提供完整的人形机器人解决方案以及训练系统

问题&#xff1a;从灵巧手收集的数据是否也会在大脑大模型中训练&#xff0c;或是在专门用于手部控制的单独模型中训练&#xff1f; Q: If the data collected from dexterous hands will be trained as well in the brain large model, or in a separate model dedicated for…

打造餐饮品牌的产品矩阵:美味与策略的完美融合-中小企实战运营和营销工作室博客

打造餐饮品牌的产品矩阵&#xff1a;美味与策略的完美融合-中小企实战运营和营销工作室博客 在竞争激烈的餐饮市场中&#xff0c;打造一个成功的餐饮品牌&#xff0c;关键在于构建一个强大且富有吸引力的产品矩阵。这不仅涉及到研发出令人垂涎欲滴的美味佳肴&#xff0c;更需要…

前端大数据处理 - Web Worker

前言 先了解一个概念&#xff1a;页面假死 浏览器有GUI渲染线程与JS引擎线程&#xff0c;这两个线程是互斥的关系 当js有大量计算时&#xff0c;会造成 UI 阻塞&#xff0c;出现界面卡顿、掉帧等情况&#xff0c;严重时会出现页面卡死的情况&#xff0c;俗称假死 在前端开发…

无缝过渡:将 Ansys 子结构模型转换为 Nastran

了解如何将 Ansys 子结构模型无缝转换为 Nastran&#xff0c;以满足有效载荷动态模型要求 Ansys 子结构模型的优势 Ansys 子结构模型为从事大型装配体结构分析和仿真的工程师和分析师提供了多项优势。 这些模型通过将复杂结构划分为更小、更易于管理的子结构&#xff0c;可以…

【Flink系列】4. Flink运行时架构

4. Flink运行时架构 4.1 系统架构 Flink运行时架构——Standalone会话模式为例 1&#xff09;作业管理器&#xff08;JobManager&#xff09; JobManager是一个Flink集群中任务管理和调度的核心&#xff0c;是控制应用执行的主进程。也就是说&#xff0c;每个应用都应该被…

AI刷题-饭馆菜品选择问题、构造回文字符串问题

目录 一、饭馆菜品选择问题 问题描述 测试样例 解题思路&#xff1a; 问题理解 数据结构选择 算法步骤 最终代码&#xff1a; 运行结果&#xff1a; 二、构造回文字符串问题 问题描述 测试样例 解题思路&#xff1a; 解题思路 具体步骤 最终代码&#xff1a;…

使用redis-cli命令实现redis crud操作

项目场景&#xff1a; 线上环境上redis中的key影响数据展示&#xff0c;需要删除。但环境特殊没办法通过 redis客户端工具直连。只能使用redis-cli命令来实现。 操作步骤&#xff1a; 1、确定redis安装的服务器&#xff1b; 2、找到redis的安装目录下 ##找到redis安装目…

讲一下ZooKeeper的持久化机制?

大家好&#xff0c;我是锋哥。今天分享关于【讲一下ZooKeeper的持久化机制&#xff1f;】面试题。希望对大家有帮助&#xff1b; 讲一下ZooKeeper的持久化机制&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 ZooKeeper 是一个开源的分布式协调服务&…

图数据库 | 18、高可用分布式设计(中)

上文我们聊了在设计高性能、高可用图数据库的时候&#xff0c;从单实例、单节点出发&#xff0c;一般有3种架构演进选项&#xff1a;主备高可用&#xff0c;今天我们具体讲讲分布式共识&#xff0c;以及大规模水平分布式。 主备高可用、分布式共识、大规模水平分布式&#xff…

【Python】第二弹---深入理解编程基础:从常量、变量到注释的全面解析

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】【MySQL】【Python】 目录 1、常量和表达式 2、变量和类型 2.1、变量是什么 2.2、变量的语法 2.3、变量的类型 2.4、动态类型特…

生产环境中常用的设计模式

生产环境中常用的设计模式 设计模式目的使用场景示例单例模式保证一个类仅有一个实例&#xff0c;并提供一个访问它的全局访问点- 日志记录器- 配置管理器工厂方法模式定义一个创建对象的接口&#xff0c;让子类决定实例化哪个类- 各种工厂类&#xff08;如视频游戏工厂模式创…

YOLOv10改进,YOLOv10检测头融合RFAConv卷积,添加小目标检测层(四头检测)+CA注意机制,全网首发

摘要 空间注意力已广泛应用于提升卷积神经网络(CNN)的性能,但它存在一定的局限性。作者提出了一个新的视角,认为空间注意力机制本质上解决了卷积核参数共享的问题。然而,空间注意力生成的注意力图信息对于大尺寸卷积核来说是不足够的。因此,提出了一种新型的注意力机制—…

解锁C#语法的无限可能:从基础到进阶的编程之旅

目录 一、C# 基础语法 1.1 数据类型 1.2 变量与常量 1.3 运算符 1.4 控制流语句 二、C# 面向对象编程语法 2.1 类与对象 2.2 封装 2.3 继承 2.4 多态 虚方法 抽象类 接口 三、C# 高级语法 3.1 特性&#xff08;Attribute&#xff09; 预定义特性 自定义特性 3…