Vue计算属性computed与方法methods的区别及说明
更新时间：2024年08月15日 09:50:02 作者：专注写bug
这篇文章主要介绍了Vue计算属性computed与方法methods的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
在官方文档中，给出了计算属性的说明与用途，也讲述了计算属性与方法的区别点。
本篇博客只做自己的探究记录，以官方文档为准。
计算属性的由来
正常来说，使用模板语法也能实现一些判断操作，并将判断后的数据值进行展示。
如下：
<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>
查看浏览器控制台中的打印信息：
【发现】
当初始数组中的数据并未变化的时候，如果采取计算属性，在第一次做调用处理，并将第一次计算的结果值做缓存；后面多次重复调用，直接读取的是缓存中的数据值，而不是重复计算。
但方法中，每次的调用都会重新执行一次计算逻辑。
相比之下，方法调用总是会在重渲染发生时再次执行函数。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文介绍了在Vue2项目中嵌入可浮动的第三方网页窗口的实现方法,包括使用iframe、div+script和dialog元素等方式,并提供了一个实战Demo,展示了如何在Vue组件中动态加载和控制浮窗的显示,需要的朋友可以参考下2025-02-02
这篇文章主要给大家介绍了关于vue3 element plus按需引入最优雅的用法,以及关于Element-plus按需引入的一些坑,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了在vue中使用Base64转码的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
这篇文章主要介绍了Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue3.0如何使用computed来获取vuex里数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
文章介绍了如何部署一个多服务器架构的项目,包括前端Vue和后端Django的部署,以及如何使用Nginx进行反向代理和负载均衡,数据库的主从复制和集群配置,以及静态文件和反向代理的配置2026-02-02
这篇文章主要为大家详细介绍了Vue通过封装全局获取焦点指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2023-12-12
有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现，并且它可以在路由地址和导航守卫上都被访问到2022-09-09
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vite比Vue CLI快在哪里，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2021-01-01
最新评论