vue学习——计算属性缓存 vs 方法

计算属性与方法的区别

最新推荐文章于 2025-07-06 22:47:46 发布

一颗粒普斯

最新推荐文章于 2025-07-06 22:47:46 发布

阅读量722

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/CODING_1/article/details/87633980

vue 专栏收录该内容

5 篇文章

订阅专栏

本文通过一个Vue.js的示例，深入浅出地解释了计算属性与方法在性能上的区别。计算属性会根据其依赖进行缓存，只有当依赖发生变化时才会重新计算，而方法每次调用都会执行。

归纳就一句话，计算属性与方法结果相同，性能不同
文档中这样描述：

计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。

通过一个demo可以很方便的理解

// html
<div id="app">
    <div v-for="item in [1,2,3,4]">
        <div> {{message}} </div>
        <div> {{ reversedMessage }} </div>
        <div> {{reversedMessageFun()}} </div>
    </div>
</div>

// js
computed: {
   reversedMessage: function() {
     console.log(123)
     return this.message.split('').reverse().join('')
   }
 },
 methods: {
  reversedMessageFun: function(){
     console.log(456)
     return this.message.split('').reverse().join('')
   }
 }


输出结果:
>123
>456
>456
>456
>456

这样就很方便理解根据依赖进行缓存了,只要message不变,计算属性就不会重新计算