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的性能是要比方法调用高很多的。