计算属性computed:{}
1、定义:要用的属性不存在,要通过已有属性计算得来
2、原理:底层借用了Object.defineproperty方法提供的getter和setter
3、get函数什么时候执行:
1)初次读取时会执行一次
2)当依赖的数据发生改变时会被再次调用
4、优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便
5、备注:
1)计算属性最终会出此案在vm身上,直接读取即可
2)如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。
new Vue({
el: "#root",
data: {
firstname: "张",
lastname: "三"
// name: firstname + lastname
},
//计算属性
computed: {
//完整写法
fullname: {
get() {
return this.firstname + '-' + this.lastname;
}
}
//简写
fullname(){
return this.firstname + '-' + this.lastname;
}
}
})
其中的get在有人读取fullname时,就会调用,且返回值被作为fullname的值
get在初次读取fullname时调用、在所依赖的数据发生变化时调用