Vue computed计算属性
1.计算属性作用: 解决渲染数据的代码 冗(rong)余 问题
某些数据在渲染的时候 可能要经过一些复杂逻辑的计算处理
2.计算属性的语法: 在vue实列的computed 对象中声明一个函数
这个函数名就是计算属性的属性名
在这个函数中 return 返回值 (是计算属性的属性值)
3.注意点
这个函数一定要写在 vue实列的 computed 对象中
这个函数一定要有返回值 否则计算属性无法渲染
4.计算属性特点及原理介绍
a 计算属性本质是一个函数
b 计算属性的值就是函数的返回值
c 缓存机制
(1) 计算属性在第一次使用时 会执行一次函数体 之后就会将返回值缓存起来
(2) 下一次使用计算属性的时候 不会执行这个函数 而是直接从缓存中读取
(3) 只有当计算属性中的数据发生变化时 这个函数才会执行一次
计算属性的基本使用
计算属性: 一个特殊顺序 值依赖于另外一些数据动态计算出来
计算属性特点: 函数内使用的变量改变 重新计算结果 返回
计算属性和函数的区别: 计算属性对比函数最大的优势在于计算属性有缓存
计算属性访问方法: 由于计算属性也是属性,可以直接通过 this.计算属性名 访问
作用: 计算属性依赖的数据如果发生变化 计算属性也只会计算一次后缓存 后续访问都从缓存中读取
注意:
1.计算属性必须定义在 computend 节点中
2. 计算属性必须是一个 函数 , 计算属性必须有返回值
3. 计算属性不能被当做方法调用 要作为属性来用
4.计算属性也是属性 , 不要跟data内属性 重名
计算属性缓存问题
计算属性: 缓存
计算属性只要计算了一次 就会把结果缓存起来 以后多次使用计算属性 直接使用缓存的结果 只会计算一次
计算属性依赖的属性一旦发生了改变 计算属性会重新计算一次 并且缓存
计算属性完整写法
语法:
get() : 如果要访问计算属性 会自动执行 get
set(): 如果要修改计算属性 会自动执行 set
注意: 1. 计算属性默认情况下只能获取 不能修改 , 如果希望计算属性可以修改 就需要使用 set写法
2. 计算属性默认由部分组成 get和set 分别用来存储计算顺序和设置计算属性