Vue——计算属性 computed 与方法 methods 区别探究

文章目录

  • 前言
  • 计算属性的由来
  • 方法实现 计算属性 同样的效果
  • 计算属性缓存 vs 方法

前言

在官方文档中,给出了计算属性的说明与用途,也讲述了计算属性与方法的区别点。本篇博客只做自己的探究记录,以官方文档为准。

vue 计算属性 官方文档

计算属性的由来

正常来说,使用模板语法也能实现一些判断操作,并将判断后的数据值进行展示。如下:

<template><h1>计算属性与方法实现探究</h1><p>Has published books:</p><span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
</template>
<script>
export default {data(){return{author: {name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']}}}
}
</script>

效果展示如下所示:
在这里插入图片描述
但正常开发来说,在模板语法中,只会用来做基本的数据展示,数据的处理需要使用放入计算属性 computed中进行实现。
如下所示:

<template><h1>计算属性与方法实现探究</h1><p>Has published books:</p><span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span><hr><span>计算属性:{{ checkBooks }}</span> <br>
</template>
<script>
export default {data(){return{author: {name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']}}},computed:{checkBooks(){console.log("=====计算属性=====");return this.author.books.length > 0 ? 'Yes' : 'No';}}
}
</script>

在这里插入图片描述

由于计算属性,属于属性,所以在标签中采取{{ }}包含时,不能带有()

方法实现 计算属性 同样的效果

由于methods中,用来存放函数、方法,所以在计算属性computed中的方法依旧可以用methods实现。如下所示:

<template><h1>计算属性与方法实现探究</h1><p>Has published books:</p><span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span><hr><span>计算属性:{{ checkBooks }}</span> <br><hr><span>方法实现:{{ checkBooks1() }}</span> <br>
</template>
<script>
export default {data(){return{author: {name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']}}},computed:{checkBooks(){console.log("=====计算属性=====");return this.author.books.length > 0 ? 'Yes' : 'No';}},// methods 中存放函数methods:{checkBooks1(){console.log("*****方法实现*****");return this.author.books.length > 0 ? 'Yes' : 'No';}}
}
</script>

在这里插入图片描述
由于是采取methods进行数据的计算,所以数据的展示,需要使用()标识调用方法。

【注意】计算属性与方法,名称不能相同,否则会出现报错!
在这里插入图片描述

计算属性缓存 vs 方法

虽然在methods中编写一个方法调用,与计算属性中抛出一个计算结果值,能达到一样的效果。
但两者本身有很大的区别。不同之处在于计算属性值会基于其响应式依赖被缓存

这句话如何理解呢,看下面的案例:

<template><h1>计算属性与方法实现探究</h1><p>Has published books:</p><span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span><hr><span>计算属性:{{ checkBooks }}</span> <br><span>计算属性:{{ checkBooks }}</span> <br><span>计算属性:{{ checkBooks }}</span> <br><span>计算属性:{{ checkBooks }}</span> <br><hr><span>方法实现:{{ checkBooks1() }}</span> <br><span>方法实现:{{ checkBooks1() }}</span> <br><span>方法实现:{{ checkBooks1() }}</span> <br><span>方法实现:{{ checkBooks1() }}</span> <br>
</template>
<script>
export default {data(){return{author: {name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']}}},computed:{checkBooks(){console.log("=====计算属性=====");return this.author.books.length > 0 ? 'Yes' : 'No';}},// methods 中存放函数methods:{checkBooks1(){console.log("*****方法实现*****");return this.author.books.length > 0 ? 'Yes' : 'No';}}
}
</script>

查看浏览器控制台中的打印信息:
在这里插入图片描述
【发现】
当初始数组中的数据并未变化的时候,如果采取计算属性,在第一次做调用处理,并将第一次计算的结果值做缓存;后面多次重复调用,直接读取的是缓存中的数据值,而不是重复计算

方法中,每次的调用都会重新执行一次计算逻辑。

相比之下,方法调用总是会在重渲染发生时再次执行函数。

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

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

相关文章

接口测试系列(一)-什么是接口测试

接口测试系列 为什么要做这个事情&#xff1f; 对自己过往在接口测试上的经验&#xff0c;写一个小结的系列文章&#xff0c;是一个系统性的思考和知识构建。发布的同时&#xff0c;也是希望获得更多感兴趣的同学的意见和反馈&#xff0c;可以把这个部分做的更好。 系列入口&…

shell脚本操作http请求的返回值——shell处理json格式数据

日常工作中&#xff0c;我们经常会遇到http请求会返回大量格式固定的数据&#xff0c;而我们只需要其中的一部分&#xff0c;那么怎么提取我们想要的字段呢。 这里会介绍一种用shell脚本处理http请求返回&#xff0c;或者处理json格式数据的方式。 这里我们用到了 jq这个强大的…

如何在一个 JavaScript 文件中引入另一个 JavaScript 文件

在早期版本的 JavaScript 中,没有提供原生的模块导入功能,因此开发者们尝试过各种不同的方法来解决这个问题。然而,自 2015 年 (ES6) 以来,JavaScript 引入了 ES6 模块标准,这使得在 Node.js 中导入模块变得更加规范。现代浏览器也广泛支持这一标准。 为了与旧版浏览器兼…

夏日采摘季,视频智能监控管理方案助力智慧果园管理新体验

5月正值我国各地西瓜、杨梅、大樱桃、油桃等水果丰收的季节&#xff0c;许多地方都举办了采摘旅游活动&#xff0c;吸引了众多游客前来体验采摘乐趣。随着采摘的人流量增多&#xff0c;果园的管理工作也面临压力。 为了提升水果园采摘活动的管理效果&#xff0c;减少人工巡查成…

Equal XOR(异或,思维)

文章目录 题目描述输入格式输出格式样例输入1样例输出1样例输入2样例输出2样例输入3样例输出3提交链接提示 解析参考代码 题目描述 给你一个长度为 2 ∗ n 2*n 2∗n 的数组 a a a &#xff0c;它由 1 1 1 到 n n n 的每个整数组成&#xff0c;每个整数包含 2 2 2 次。同时…

nodejs版本管理切换工具nvm介绍、nvm下载、nvm安装、配置及nvm使用

最近很多同学问&#xff0c;在工作中&#xff0c;同时在进行2个或者多个不同的项目开发&#xff0c;每个项目的需求不同&#xff0c;进而不同项目必须依赖不同版本的NodeJS运行环境&#xff0c;这种情况下&#xff0c;对于维护多个版本的node将会是一件非常麻烦的事情&#xff…

SQL刷题笔记day6-1

1从不订购的客户 分析&#xff1a;从不订购&#xff0c;就是购买订单没有记录&#xff0c;not in 我的代码&#xff1a; select c.name as Customers from Customers c where c.id not in (select o.customerId from Orders o) 2 部门工资最高的员工 分析&#xff1a;每个部…

vue+elemntui 加减表单框功能样式

<el-form ref"form" :model"form" :rules"rules" label-width"80px"><el-form-item label"配置时间" prop"currentAllocationDate"><div v-for"(item,key) in timeList"><el-date…

高并发项目-用户登录基本功能

文章目录 1.数据库表设计1.IDEA连接数据库2.修改application.yml中数据库的名称为seckill3.IDEA创建数据库seckill4.创建数据表 seckill_user5.密码加密分析1.传统方式&#xff08;不安全&#xff09;2.改进方式&#xff08;两次加密加盐&#xff09; 2.密码加密功能实现1.pom.…

CI/CD(基于ESP-IDF)

主要参考资料 B站乐鑫信息科技《【乐鑫全球开发者大会】DevCon23 #15 &#xff5c;通过 CI/CD 进行流水线开发》 pytest-embedded乐鑫文档: https://docs.espressif.com/projects/pytest-embedded/en/latest/api.html 目录 CI/CD简介乐鑫内部CI/CD测试GitLab CI/CDGitHub Actio…

CSA 实现安全应用容器架构的最佳实践 课堂随笔

CSA 实现安全应用容器架构的最佳实践 编写背景 随着云计算和微服务架构的兴起&#xff0c;容器技术因其轻量级、可移植性和易于管理等优势成为现代应用部署的首选。然而&#xff0c;容器的安全性问题也随之凸显。云安全联盟&#xff08;Cloud Security Alliance, CSA&#xf…

Android基础-Kotlin语言的作用及优缺点

一、Kotlin语言的作用 Kotlin是一种由JetBrains公司开发的现代化静态类型编程语言&#xff0c;自其诞生以来&#xff0c;便在多个领域展现出了强大的应用潜力。其主要作用可以概括为以下几点&#xff1a; Android应用开发&#xff1a;Kotlin作为Android开发的官方推荐语言&am…

dockerfile关键字

参考&#xff1a;59_Dockerfile保留字简介_哔哩哔哩_bilibili FROM 作用&#xff1a;指定基础镜像&#xff0c;即在这个基础镜像上构建新镜像&#xff0c;如下所示&#xff0c;表示在ubuntu20.04镜像的基础上构建新镜像 FROM ubuntu:20.04 MAINTAINER 作用&#xff1a;镜像…

LabVIEW中实现Trio控制器的以太网通讯

在LabVIEW中实现与Trio控制器的以太网通讯&#xff0c;可以通过使用TCP/IP协议来完成。这种方法包括配置Trio控制器的网络设置、使用LabVIEW中的TCP/IP函数库进行数据传输和接收&#xff0c;以及处理通讯中的错误和数据解析。本文将详细说明实现步骤&#xff0c;包括配置、编程…

SheetJS V0.17.5 导入 Excel 异常修复 Invalid HTML:could not find<table>

导入 Excel 提示错误&#xff1a;Invalid HTML:could not find<table> 检查源代码 发现 table 属性有回车符 Overview: https://docs.sheetjs.com/docs/ Source: https://git.sheetjs.com/sheetjs/sheetjs/issues The public-facing websites of SheetJS: sheetjs.com…

网络通讯聊天工具的实现v2

在原有基础上加入文件的传输功能。 从客户端传送到服务器后&#xff0c;服务器接受文件&#xff0c;再转发给其他客户端&#xff0c;客户端接受后服务器删除文件。 涉及文件的读取与关闭。 1.原来传输的改进 1.1服务器需要区分传输的是文件还是信息。 在传输之前先传输一个…

Linux基础指令用户管理002

继Linux基础指令用户管理001我们讲述了创建用户和删除用户&#xff0c;我们讲一下如何设置用户密码以及修改用户信息。 操作系统 CentOS Stream 9 设置用户密码 我们使用passwd指令passwd name [rootlocalhost ~]# passwd wg 更改用户 wg 的密码 。 新的密码&#xff1a; …

装机必备——截图软件PixPin安装教程

装机必备——截图软件PixPin安装教程 软件下载 软件名称&#xff1a;PixPin 1.5 软件语言&#xff1a;简体中文 软件大小&#xff1a;30.1M 系统要求&#xff1a;Windows7或更高&#xff0c; 64位操作系统 硬件要求&#xff1a;CPU2GHz &#xff0c;RAM2G或更高 下载通道①迅…

通过LLM多轮对话生成单元测试用例

通过LLM多轮对话生成单元测试用例 代码 在采用 随机生成pytorch算子测试序列且保证算子参数合法 这种方法之前,曾通过本文的方法生成算子组合测试用例。目前所测LLM生成的代码均会出现BUG,且多次交互后仍不能解决.也许随着LLM的更新,这个问题会得到解决.记录备用。 代码 impo…

Inno Setup 深入浅出-文件的显示

【1】在需要打包的文件中&#xff0c;新建一个文本文件&#xff0c;如License.txt 注意&#xff1a;中文的编码格式需要GB2312&#xff0c;否则显示乱码 【2】读取、显示文本 [Code] procedure Init_ShowLicense(); var tmpFont:TFont; begin editLicense : TMemo.C…