VUE computed 计算属性本来的样子

计算属性的特点

• 计算属性可以对计算属性依赖的属性进行监视；
• 计算属性基于相关依赖进行更新，只有相关依赖发生改变时才更新；
• 基于上一条，因此计算属性有缓存，只要相关依赖不发生改变，多次访问计算属性return的值是之前缓存的值，不会多次执行；

计算属性的完整写法

常用写法

    data () {
        return {
            firstName: 'natsume',
            lastName: 'takashi'
        }
    },
    computed: {
        fullName () {
            return this.firstName + ' ' + this.lastName
        },
    },

完整写法：

    computed: {
        fullName: {
            set: function (newVal) {
                this.firstName = newVal
            },
            get: function () {
                return this.firstName + ' ' + this.lastName
            }
        }
    },

正常情况下，不能给计算属性赋值，既计算属性为只读属性，若使用完整写法，在计算属性中修改计算属性相关依赖的值，计算属性也会重新计算，但是不可在计算属性的set方法中直接给计算属性赋值，会造成死循环，堆栈溢出报错；

若省略计算属性的set可简写为：

    computed: {
        fullName: {
            get: function () {
                return this.firstName + ' ' + this.lastName
            }
        }
    },

因为大多数情况下都不需要设置set，因此可以进一步简写：

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

采用ES6的写法既是常用写法：

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