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

版权声明：转载请注明出处并附上原文链接,谢谢! https://blog.csdn.net/CODING_1/article/details/87633980

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

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

通过一个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不变,计算属性就不会重新计算