Vue计算属性computed与方法methods的区别及说明

更新时间：2024年08月15日 09:50:02 作者：专注写bug

这篇文章主要介绍了Vue计算属性computed与方法methods的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

在官方文档中，给出了计算属性的说明与用途，也讲述了计算属性与方法的区别点。

本篇博客只做自己的探究记录，以官方文档为准。

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>

查看浏览器控制台中的打印信息：

【发现】

当初始数组中的数据并未变化的时候，如果采取计算属性，在第一次做调用处理，并将第一次计算的结果值做缓存；后面多次重复调用，直接读取的是缓存中的数据值，而不是重复计算。

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

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Element-UI中el-table如何合并相同单元格
这篇文章主要给大家介绍了关于Element-UI中el-table如何合并相同单元格的相关资料,el-table的组件的可以合并单元格,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-08-08
Vue+penlayers实现多边形绘制及展示
这篇文章主要为大家详细介绍了Vue+penlayers实现多边形绘制及展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
Vue多系统切换实现方案
本篇文章给大家分享了关于Vue多系统切换实现的解决方案，对此有需要的朋友可以跟着参考学习下。
2018-06-06
Vue AST源码解析第一篇
这篇文章主要为大家详细介绍了Vue AST源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
vue指令中的v-once用法
这篇文章主要介绍了vue指令中的v-once用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Vue export import 导入导出的多种方式与区别介绍
这篇文章主要介绍了Vue export import 导入导出的多种方式与区别介绍，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-02-02
Vue.js如何实现路由懒加载浅析
Vue是可以自定义指令的,最近学习过程中遇见了一个需要懒加载的功能，发现网上这方面的资料较少，所以下面这篇文章主要给大家介绍了关于Vue.js如何实现路由懒加载的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-08-08
Vue子组件向父组件传值示范方法
这篇文章主要介绍了Vue子组件向父组件传值方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-03-03
Vue项目中实现无感Token刷新的示例
在前端项目中,Token用于用户认证和权限管理,文章介绍了在Vue项目中实现Token的无感刷新,包括Token刷新的原理、拦截器的应用和处理Token过期的方法,感兴趣的可以了解一下
2024-11-11
vue实现echart饼图legend显示百分比的方法
本文主要介绍了vue实现echart饼图legend显示百分比的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09