脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue computed与方法methods的区别

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>

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

【发现】

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

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

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

总结

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

您可能感兴趣的文章:

相关文章

  • vue2项目使用exceljs多表头导出功能详解

    vue2项目使用exceljs多表头导出功能详解

    ExcelJS是一个用于在Node.js和浏览器中创建、读取和修改Excel文件的强大JavaScript库,下面这篇文章主要给大家介绍了关于vue2项目使用exceljs多表头导出功能的相关资料,需要的朋友可以参考下
    2024-05-05
  • vue中使用keep-alive动态删除已缓存组件方式

    vue中使用keep-alive动态删除已缓存组件方式

    这篇文章主要介绍了vue中使用keep-alive动态删除已缓存组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • graphQL在前端vue中使用实例代码

    graphQL在前端vue中使用实例代码

    这篇文章主要介绍了graphQL在前端vue中使用过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-03-03
  • 解决iview打包时UglifyJs报错的问题

    解决iview打包时UglifyJs报错的问题

    下面小编就为大家分享一篇解决iview打包时UglifyJs报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • electron踩坑之dialog中的callback解决

    electron踩坑之dialog中的callback解决

    这篇文章主要介绍了electron踩坑之dialog中的callback解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • vue中v-model和.sync修饰符的区别

    vue中v-model和.sync修饰符的区别

    在平时开发是经常用到一些父子组件通信,经常用到props、vuex等等,下面这篇文章主要给大家介绍了关于vue中v-model和.sync修饰符区别的相关资料,需要的朋友可以参考下
    2022-06-06
  • Vue3如何在setup中获取元素引用(ref)

    Vue3如何在setup中获取元素引用(ref)

    这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • vue中子组件传递数据给父组件的讲解

    vue中子组件传递数据给父组件的讲解

    今天小编就为大家分享一篇关于vue中子组件传递数据给父组件的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 解决vue.js this.$router.push无效的问题

    解决vue.js this.$router.push无效的问题

    今天小编就为大家分享一篇解决vue.js this.$router.push无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 使用electron打包Vue前端项目的详细流程

    使用electron打包Vue前端项目的详细流程

    这篇文章主要介绍了使用electron打包Vue前端项目的详细流程,文中通过图文结合的方式给大家介绍的非常详细,对大家学习electron打包Vue有一定的帮助,需要的朋友可以参考下
    2024-04-04

最新评论