1、什么是计算属性
- 写在computed对象中的属性,本质上是一个方法,不过使用时依旧当属性来使用
2.什么时候使用计算属性
- 一个变量的值, 需要用另外变量计算而得来
3、计算属性的配置项
get():必须要写,该函数不接受参数
get()什么时候被调用?:当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用,getter函数有一个返回值,该返回值就是计算属性的值
set():可选项,接受一个可选参数(计算属性被修改之后的值)
set()什么时候被调用?: 当计算属性被修改时被调用
get()和 set()中出现的this执向vm
4、计算属性的缓存
计算属性是基于它们的依赖项的值结果进行缓存的,只要依赖的变量不变, 都直接从缓存取结果
计算属性整个过程
当第一次调用get()之后,Vue实例身上会出现一个与计算属性同名的属性(我称为计算属性的缓存属性),该属性的值就是调用get()返回的值
当再次调用getter之后,Vue把getter返回的值赋值给这个缓存属性
缓存属性:因此当不是初次访问计算属性时且计算属性所依赖的数据没有发生变化时,Vue实际上用的是这个属性,而不是再次执行get()
原理:底层借助了Object.defineProperty方法提供的getter和setter
完整语法:
computed: {
// "计算属性名" (){},
"计算属性名": {
set(值){
},
get(){
return 值
}
}