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

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

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

前言

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

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

vue 計(jì)算屬性官方文檔

計(jì)算屬性的由來

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

如下：

<template>
    <h1>計(jì)算屬性與方法實(shí)現(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ā)來說，在模板語法中，只會(huì)用來做基本的數(shù)據(jù)展示，數(shù)據(jù)的處理需要使用放入計(jì)算屬性 computed中進(jìn)行實(shí)現(xiàn)。

如下所示：

<template>
    <h1>計(jì)算屬性與方法實(shí)現(xiàn)探究</h1>
    <p>Has published books:</p>
    <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
    <hr>
    <span>計(jì)算屬性：{{ 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("=====計(jì)算屬性=====");
            return this.author.books.length > 0 ? 'Yes' : 'No';
        }
    }
}
</script>

由于計(jì)算屬性，屬于屬性，所以在標(biāo)簽中采取{{ }}包含時(shí)，不能帶有()。

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

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

如下所示：

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

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

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

計(jì)算屬性緩存 vs 方法

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

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

不同之處在于計(jì)算屬性值會(huì)基于其響應(yīng)式依賴被緩存。

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

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

查看瀏覽器控制臺(tái)中的打印信息：

【發(fā)現(xiàn)】

當(dāng)初始數(shù)組中的數(shù)據(jù)并未變化的時(shí)候，如果采取計(jì)算屬性，在第一次做調(diào)用處理，并將第一次計(jì)算的結(jié)果值做緩存；后面多次重復(fù)調(diào)用，直接讀取的是緩存中的數(shù)據(jù)值，而不是重復(fù)計(jì)算。

但方法中，每次的調(diào)用都會(huì)重新執(zhí)行一次計(jì)算邏輯。

相比之下，方法調(diào)用總是會(huì)在重渲染發(fā)生時(shí)再次執(zhí)行函數(shù)。