脚本宝典收集整理的这篇文章主要介绍了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的性能是要比方法调用高很多的。

脚本宝典总结

以上是脚本宝典为你收集整理的vue计算属性与方法调用性能对比全部内容，希望文章能够帮你解决vue计算属性与方法调用性能对比所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。