Vue計算屬性computed與方法methods的區(qū)別及說明

更新時間：2024年08月15日 09:50:02 作者：專注寫bug

這篇文章主要介紹了Vue計算屬性computed與方法methods的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

在官方文檔中，給出了計算屬性的說明與用途，也講述了計算屬性與方法的區(qū)別點。

本篇博客只做自己的探究記錄，以官方文檔為準。

vue 計算屬性官方文檔

計算屬性的由來

正常來說，使用模板語法也能實現(xiàn)一些判斷操作，并將判斷后的數(shù)據(jù)值進行展示。

如下：

<template>
    <h1>計算屬性與方法實現(xiàn)探究</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>

效果展示如下所示：

但正常開發(fā)來說，在模板語法中，只會用來做基本的數(shù)據(jù)展示，數(shù)據(jù)的處理需要使用放入計算屬性 computed中進行實現(xiàn)。

如下所示：

<template>
    <h1>計算屬性與方法實現(xiàn)探究</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>

由于計算屬性，屬于屬性，所以在標簽中采取{{ }}包含時，不能帶有()。

方法實現(xiàn) 計算屬性同樣的效果

由于methods中，用來存放函數(shù)、方法，所以在計算屬性computed中的方法依舊可以用methods實現(xiàn)。

如下所示：

<template>
    <h1>計算屬性與方法實現(xiàn)探究</h1>
    <p>Has published books:</p>
    <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
    <hr>
    <span>計算屬性：{{ checkBooks }}</span> <br>
    <hr>
    <span>方法實現(xiàn)：{{ 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 中存放函數(shù)
    methods:{
        checkBooks1(){
            console.log("*****方法實現(xiàn)*****");
            return this.author.books.length > 0 ? 'Yes' : 'No';
        }
    }
}
</script>

由于是采取methods進行數(shù)據(jù)的計算，所以數(shù)據(jù)的展示，需要使用()標識調(diào)用方法。

【注意】計算屬性與方法，名稱不能相同，否則會出現(xiàn)報錯！

計算屬性緩存 vs 方法

雖然在methods中編寫一個方法調(diào)用，與計算屬性中拋出一個計算結(jié)果值，能達到一樣的效果。

但兩者本身有很大的區(qū)別。

不同之處在于計算屬性值會基于其響應式依賴被緩存。

這句話如何理解呢，看下面的案例：

<template>
    <h1>計算屬性與方法實現(xiàn)探究</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>方法實現(xiàn)：{{ checkBooks1() }}</span> <br>
    <span>方法實現(xiàn)：{{ checkBooks1() }}</span> <br>
    <span>方法實現(xiàn)：{{ checkBooks1() }}</span> <br>
    <span>方法實現(xiàn)：{{ 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 中存放函數(shù)
    methods:{
        checkBooks1(){
            console.log("*****方法實現(xiàn)*****");
            return this.author.books.length > 0 ? 'Yes' : 'No';
        }
    }
}
</script>

查看瀏覽器控制臺中的打印信息：