计算属性

Guitar大约 2 分钟

原有属性：data配置项中的属性。使用数据代理代理至vue实例。

计算属性：computed配置项中的属性，提供set、get方法。用 data 的属性经过计算得出的全新的属性就是计算属性。

计算属性是基于它们的响应式依赖进行缓存的。只有所关联的原有属性发生变化时，才会重新计算（执行get方法）。（第一次访问也会执行get方法）
对于任何复杂逻辑，你都应当使用计算属性。
methods方式也可以实现计算属性的功能，但不是响应式的，效率低！

使用复杂的插值语法时，出现的问题：

代码可读性差
代码不可复用
代码难以维护

computed 配置项

computed : {
    属性名1 : {
        // 当读取计算属性1的值的时候，getter方法被自动调用。
        get(){
            ...
            return ...;
        },
        // 当修改计算属性1的值的时候，setter方法被自动调用。
        set(newVal){
            ...
        }
    },
    // 这是另一个计算属性
    属性名2 : {...}
    
    // 简写形式：set不需要的时候。直接给出getter
    reversedInfo(){ 
        return this.info.split('').reverse().join('')
    }
}

计算属性的作用：

代码复用
代码更便于维护
代码执行效率高（响应式）

计算属性的性质

计算属性无法通过 vm.$data 访问。
计算属性的setter、getter方法中的this指向当前vue实例vm。
getter 方法的调用时机：
a. 初次访问该属性时。
b. 计算属性所依赖的数据发生变化时。
setter 方法的调用时机：当计算属性被修改时。（作为左值时）
计算属性没有真正的值，每一次都是依赖 data 属性计算出来的。（但是有响应式的类缓存，并不是每次都执行getter）
算属性的 getter 和 setter 方法不能使用箭头函数，因为箭头函数的 this 不是 vm。而是 window。