Vue04/ 计算属性computed 介绍和完整写法 get( ) set( )

计算属性

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内属性 重名

计算属性缓存问题

计算属性: 缓存

计算属性只要计算了一次 就会把结果缓存起来 以后多次使用计算属性 直接使用缓存的结果 只会计算一次

计算属性依赖的属性一旦发生了改变 计算属性会重新计算一次 并且缓存

计算属性完整写法

语法:

computed:{
    计算属性名:{
    get(){ },
    set(){ }
}
}

get() : 如果要访问计算属性 会自动执行 get

set(): 如果要修改计算属性 会自动执行 set

注意: 1. 计算属性默认情况下只能获取 不能修改 ， 如果希望计算属性可以修改 就需要使用 set写法

         2. 计算属性默认由部分组成 get和set 分别用来存储计算顺序和设置计算属性