计算属性

所有的计算属性都以函数的形式写在Vue实例中的computed选项内,最终返回计算后的结果。

计算属性的用法

在一个计算属性中可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

计算属性还可以依赖多个Vue实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。

每一个计算属性都包含一个getter和一个setter

绝大多数情况下,只会用默认的getter方法读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法,不必将gettersetter都声明。

计算属性除了简单的文本插值外,还经常用于动态地设置元素的样式名称class和内联样式style。当使用组件时,计算属性也经常用来动态传递props

计算属性还有两个很实用的小技巧容易被忽略:

  1. 一是计算属性可以依赖其他计算属性;
  2. 二是计算属性不仅可以依赖当前Vue实例的数据,还可以依赖其他实例的数据。
<div id="app1"></div>
    <div id="app2">
    {{reverseText}}
</div>

var app1 = new Vue({
    el: "#app1",
    data: {
        text: '123,456'
    },
});
var app2 = new Vue({
    el: "#app2",
    computed: {
        reverseText: function () {
            //这里依赖的是实例app1的数据text
            return app1.text.split(',').reverse().join(',');
        }
    }
});

计算属性缓存

没有使用计算属性,在methods中定义了一个方法实现了相同的效果,甚至该方法还可以接受参数,使用起来更灵活。

使用计算属性的原因在于它的依赖缓存。一个计算属性所依赖的数据发生变化时,它才会重新取值,在上例中只要text值不改变,计算属性也就不更新。但是methods则不同,只要重新渲染,它就会被调用,因此函数也会被执行。

使用计算属性还是methods取决于你是否需要缓存,当遍历大数组和做大量计算时,应当使用计算属性,除非你不希望得到缓存。