Vue中的计算属性

计算属性：
1.为什么要用计算属性？

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

2.计算属性概念：

顾名思义，首先它是一种属性，其次它有“计算”这个特殊性质。每次取得它的值的时候，它并不像普通属性那样直接返回结果，而是经过一系列的计算之后再返回结果。同时只要在它的当中里引用了 data 中的某个属性，当这个属性发生变化时，计算属性仿佛可以嗅探到这个变化，并自动重新执行。
3.语法

computed: {
需要返回的数据: function () {
return 处理操作
}
}
4.计算属性和方法有什么区别？

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
方法绑定数据只要被调用，方法将总会再次执行函数。
计算属性相对于方法在处理特定场合下节省资源性能
5.计算属性和侦听器的区别？

当watch监听的值发生改变就会被调用，watch可以在数据变化时做一些异步处理或者开销大的操作
计算属性是计算依赖的值，当依赖的值发生改变才会触发。
—
作用：1-减少代码冗余便于维护 2-有缓存提升性能

留心：计算属性是基于它们的响应式依赖进行缓存的 也就是说缓存什么时候清除 当他监控的数据变化了

①vue2中：

页面调用： {{reverseCp}}

computed: {
reverseCp() { // 写方法即可
return this.数组名.split('').reverse().join('')
}
}

②vue3中：

get 基于响应式依赖触发（自身更新、同步视图显示最新数据 因此必须写return返回显示最新数据
set 基于computed键更新触发（了解 没有return 当computed被修改了 可以再这里面去改模型数据

————————————————
class 类名
{
键 = 值 // 声明模型数据 以前的data

函数名() {}   // 声明methods中的方法 

get 函数名() {}  // 声明计算属性
set 函数名() {}  // 声明计算属性

}