vue：计算属性computed

案例：使用计算属性实现下图效果，输入姓（firstname）和名（lastname），在页面内显示“姓-名”。

前端代码:

 js代码：

// vm 是vue实例对象
const vm = new Vue(){
    el: '#root',
    data: {
        firstName: '张',
        lastName: '三'
    },
    computed: {//计算属性
        fullName: {
            //get的调用时机？
            //1、第一次读取到fullname时
            //2、fullname所设计到的属性值发生变化时（采用缓存机制）
            get(){
                return this.firstName + '-' + this.lastName
            },
            set(){
                //对fullname的值进行修改时调用set方法
                this.firstname = '?'
                this.lastname = '?'
            }
        }
    }
}

计算属性的简写方式：

当我们只是进行属性读取并渲染而不修改它的值时，也就是只使用计算属性的get()而不使用他的set()方法时，可以采用简写方式。

// vm 是vue实例对象
const vm = new Vue(){
    el: '#root',
    data: {
        firstName: '张',
        lastName: '三'
    },
    computed: {//计算属性
        fullName(){
            return this.firstName + '-' + this.lastName
        }
    }
}