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;路…

Leetcode3097:或值至少为 K 的最短子数组 II

题目描述&#xff1a; 给你一个 非负 整数数组 nums 和一个整数 k 。 如果一个数组中所有元素的按位或运算 OR 的值 至少 为 k &#xff0c;那么我们称这个数组是 特别的 。 请你返回 nums 中 最短特别非空 子数组的长度&#xff0c;如果特别子数组不存在&#xff0c;那么返…

Android CustomTextField

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

《CPython Internals》阅读笔记:p221-p231

《CPython Internals》学习第 12天&#xff0c;p221-p231 总结&#xff0c;总计 11 页。 一、技术总结 无。 二、英语总结(生词&#xff1a;2) 1.at a time idiom. separately(单独地) in the specified groups(一次)。示例&#xff1a; (1) I can only do one thing at …

WORD转PDF脚本文件

1、在桌面新建一个文本文件&#xff0c;把下列代码复制到文本文件中。 On Error Resume Next Const wdExportFormatPDF 17 Set oWord WScript.CreateObject("Word.Application") Set fso WScript.CreateObject("Scripting.Filesystemobject") Set fdsf…

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;可以…

C++中string笔记杂谈

string 类库中的size_type是一种怎样的自定义类型 在 C 的 string 类库中&#xff0c;size_type 是一种无符号整数类型&#xff0c;用于表示字符串的大小&#xff08;长度&#xff09;。 它被定义为能够容纳字符串可能的最大长度的无符号整数类型。 比如说&#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安装目…

31.Java Callable 接口与 FutureTask 类

一、Callable 接口 1、概述 目前我们学习了有两种创建线程的方法&#xff0c;一种是通过继承 Thread 类&#xff0c;另一种是 通过实现 Runnable 接口创建线程&#xff0c;但是&#xff0c;Runnable 缺少的一项功能是&#xff0c;当线程 终止时&#xff08;即 run 方法完成时…

Springboot项目Jackson支持多种接收多种时间格式

前言 在springboot项目中经常会使用Jackson框架,当前端给后端传输时间类型时,我们一般需要先配置好时间格式,否则后端无法接收。以下是一些配置方法 统一配置 spring:jackson:time-zone: GMT+8date-format: yyyy-MM-dd HH:mm:ss这种配置就是要求前端统一传输的格式是yyyy-…