vue計算屬性與方法調用性能對比

1. 代碼示例:

<template>
    <div id="app">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <input type="text" v-model="age">
        <br><br>
        計算屬性: {{name}}
        <br><br>
        調用方法: {{getName()}}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                firstName: 'Samantha',
                lastName: 'Carter',
                age: 25
            }
        },
        methods: {
            getName () {
                console.log('name changed')
                return `${this.firstName} ${this.lastName}`
            }
        },
        computed: {
            name () {
                console.log('getName invoked')
                return `${this.firstName} ${this.lastName}`
            }
        }
    }
</script>

2. 執行結果
(1) 初始結果

(2) firstName或lastName改變之後的執行結果

(3) age改變之後的執行結果

3. 分析結論

在使用vue進行開發的過程中，經常會遇到computed動態計算屬性值的場景，使用{{}}調用方法(getName)能達到同樣的目的，但效率不及computed，原因在於每當綁定在this上的值發生變化時，都會調用一次方法，而computed會緩存計算結果，只有當其依賴的屬性值發生變化時纔會重新計算，因此纔會出現圖三的情況，當年齡發生變化時，getName()方法被調用以輸入"getName invoked"，而name所依賴的firstName和lastName都沒有發生變化，所以name沒有重新計算，由此可見，computed的性能是要比方法調用高很多的。