Vue.js从入门到项目实践(超值版)
上QQ阅读APP看书,第一时间看更新

5.1.3 计算属性缓存

在Vue中,可以将同一函数定义为一个方法,而不是一个计算属性,两种方式的最终结果确实是完全相同的,只是一个使用reverseTitle()取值、一个使用reverseTitle取值。不同的是,计算属性是基于它们的依赖进行缓存的,计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着,只要title还没有发生改变,多次访问reverseTitle计算属性会立即返回以前的计算结果,而不必再次执行函数。

代码如下:

    <div>{{reverseTitle()}}</div><br>
    //在组件中
    methods: {
         reverseTitle: function(){
             return this.title.split('').reverse().join('')
         }
    }

计算属性缓存最大的特点就是属性变化才执行getter函数,否则执行缓存默认的true指令打开缓存。

计算属性缓存的作用:如果频繁地使用计算属性,而计算属性方法中有大量的耗时操作(例如在getter中循环一个大的数组),会带来一些性能问题。计算属性缓存可用来解决该问题。