Vue中的methods方法与computed计算属性的区别

2024-08-24 19:04

本文主要是介绍Vue中的methods方法与computed计算属性的区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在创建的 Vue 应用程序实例中,可以通过 methods 选项定义方法。应用程序实例本身会代理 methods 选项中的所有方法,因此可以像访问 data 数据那样来调用方法。在模板中绑定表达式只能用于简单的运算。如果运算比较复杂,可以使用 Vue.js 提供的 computed 计算属性,通过计算属性可以处理比较复杂的逻辑。那么 methods 方法与 computed 计算属性有什么区别?

问:Vue 中的 methods 方法与 computed 计算属性有什么区别?

答:主要区别是 methods 方法会实时计算,而 computed 计算属性是使用缓存数据。

将相同的操作定义为一个方法,或者定义为一个计算属性,两种方式的结果完全相同。那么为什么还需要计算属性呢?因为计算属性是基于它们的依赖进行缓存的。当页面重新渲染时,如果依赖的数据未发生改变,使用计算属性获取的值就是一直是缓存值。只有依赖的数据发生改变时才会重新获取值。如果使用的是方法,在页面重新渲染时,方法中的函数总会被重新调用。

【实例】下面通过一个实例来说明 computed 计算属性的缓存。

<body><div id="app"><h3>博客信息:{{blogInfo}}</h3><h3>博客信息:{{blogUrl}}</h3><input v-model="message" /><p>{{message}}</p><p>{{getNowTimeM()}}</p><p>{{getNowTimeC}}</p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">//使用 Vue.createApp 函数创建一个应用程序实例const vueApp = Vue.createApp({//数据data() {return {blogInfo: '您好,欢迎访问 pan_junbiao的博客',blogUrl: 'https://blog.csdn.net/pan_junbiao',message: '',text1: '通过 methods 方法,获取当前时间:',text2: '通过 computed 属性,获取当前时间:'}},//方法methods: {getNowTimeM: function(){let date = new Date();let hour = date.getHours();let minute = date.getMinutes();let second = date.getSeconds();return `${this.text1} ${hour}:${minute}:${second}`;}},//计算属性computed: {getNowTimeC: function(){let date = new Date();let hour = date.getHours();let minute = date.getMinutes();let second = date.getSeconds();return `${this.text2} ${hour}:${minute}:${second}`;}}//使用 mount() 方法,装载应用程序实例的根组件}).mount('#app'); 
</script>

执行结果:

(1)页面加载,输出当前时间:

(2)在文本框中输入内容后,页面进行了重新渲染:

运行上述代码后,页面中会输出一个文本框和当前时间。当在文本框中输入内容后,页面进行了重新渲染,这是,通过 methods 方法获取的当前时间是最新的时间,即重新获取了数据。而通过 computed 计算属性获取的当前时间没有发生改变,使用的是缓存数据。

在该实例中,getNowTimeC 计算属性依赖与 text1 属性。当页面重新渲染时,只要 text1 属性未发生改变,getNowTimeC 计算属性就会立即返回结果,因此会输出缓存的时间。而在页面重新渲染时,每次调用 getNowTimeM() 方法总是会再次执行函数,因此会输出最新的时间。

这篇关于Vue中的methods方法与computed计算属性的区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1103337

相关文章

Maven 配置中的 <mirror>绕过 HTTP 阻断机制的方法

《Maven配置中的<mirror>绕过HTTP阻断机制的方法》:本文主要介绍Maven配置中的<mirror>绕过HTTP阻断机制的方法,本文给大家分享问题原因及解决方案,感兴趣的朋友一... 目录一、问题场景:升级 Maven 后构建失败二、解决方案:通过 <mirror> 配置覆盖默认行为1. 配置示

SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

《SpringBoot排查和解决JSON解析错误(400BadRequest)的方法》在开发SpringBootRESTfulAPI时,客户端与服务端的数据交互通常使用JSON格式,然而,JSON... 目录问题背景1. 问题描述2. 错误分析解决方案1. 手动重新输入jsON2. 使用工具清理JSON3.

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字

使用jenv工具管理多个JDK版本的方法步骤

《使用jenv工具管理多个JDK版本的方法步骤》jenv是一个开源的Java环境管理工具,旨在帮助开发者在同一台机器上轻松管理和切换多个Java版本,:本文主要介绍使用jenv工具管理多个JD... 目录一、jenv到底是干啥的?二、jenv的核心功能(一)管理多个Java版本(二)支持插件扩展(三)环境隔

Java中Map.Entry()含义及方法使用代码

《Java中Map.Entry()含义及方法使用代码》:本文主要介绍Java中Map.Entry()含义及方法使用的相关资料,Map.Entry是Java中Map的静态内部接口,用于表示键值对,其... 目录前言 Map.Entry作用核心方法常见使用场景1. 遍历 Map 的所有键值对2. 直接修改 Ma

Mybatis Plus Join使用方法示例详解

《MybatisPlusJoin使用方法示例详解》:本文主要介绍MybatisPlusJoin使用方法示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录1、pom文件2、yaml配置文件3、分页插件4、示例代码:5、测试代码6、和PageHelper结合6

Java中实现线程的创建和启动的方法

《Java中实现线程的创建和启动的方法》在Java中,实现线程的创建和启动是两个不同但紧密相关的概念,理解为什么要启动线程(调用start()方法)而非直接调用run()方法,是掌握多线程编程的关键,... 目录1. 线程的生命周期2. start() vs run() 的本质区别3. 为什么必须通过 st

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》:本文主要介绍了html滚动条滚动过快会留下边框线的解决方案,解决方法很简单,详细内容请阅读本文,希望能对你有所帮助... 滚动条滚动过快时,会留下边框线但其实大部分时候是这样的,没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行

C#之List集合去重复对象的实现方法

《C#之List集合去重复对象的实现方法》:本文主要介绍C#之List集合去重复对象的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C# List集合去重复对象方法1、测试数据2、测试数据3、知识点补充总结C# List集合去重复对象方法1、测试数据

SpringBoot读取ZooKeeper(ZK)属性的方法实现

《SpringBoot读取ZooKeeper(ZK)属性的方法实现》本文主要介绍了SpringBoot读取ZooKeeper(ZK)属性的方法实现,强调使用@ConfigurationProperti... 目录1. 在配置文件中定义 ZK 属性application.propertiesapplicati