Vue计算属性

计算属性的作用与目的

1. 要用的属性不存在，需要通过已有的属性计算得来
2. 原理：底层借助Object.defineproperty方法提供的setter和getter
3. 优点：计算属性相对于methods中的方法，好处在于计算属性有缓存，多次调用，只会执行一次get方法，methods中的方法则会被执行多次，计算属性的效率更高，方便调试
4. 计算属性直接出现在vm上，使用时直接读取即可

计算属性的声明与使用

computed: {
    fullName: {
        // 计算属性中 当计算属性被调用时，就会执行计算属性的get方法，并返回该计  算属性的值
        // get的调用时机 1.初次读取该计算属性时 2.计算属性所依赖的数据发生变化时，这个案例中firstName/lastName变化时都会触发计算属性调用get方法
        get () {//计算属性中必须实现的方法
            // firstName 和 lastName 为data中声明的属性
            return this.firstName + '-' + this.lastName
        },
        //set的调用时机：该属性被直接修改时
        set (value) {//如果不需要直接更改改属性值，就不需要实现set方法
            var arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
}

如果不需要set方法，可以兑计算属性进行简写，代码如下：

computed: {
    fullName () {
        return this.firstName + '-' + this.lastName
    }
}