Vue计算属性的缓存和setter

1.计算属性的缓存

通过方法名可以调用computed方法，而且不需要加括号

{{方法名}}

我们可以将同一函数定义为一个方法，而不是一个计算属性。两种方式的结果是完全不同的，不同的是计算属性基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时它们才会重新求值（get（）），这就是说message没发生改变，那么通过get（）方法获得值都是相同的（之前运算的结果），而且不必再次执行函数。

相比较函数定义一个方法而言，每当触发重新渲染时都会调用放法并且再次执行函数进行运算和返回值。

假设有一个性能消耗打的计算属性A，它需要遍历一个巨大的数组并且大量的计算，然后可能有其他的计算依赖于A，如果没有缓存，就不可避免的每次都要getter（没有改变A只是依赖A的数据），在这种情况下这可以帮我们大幅的优化性能

2.计算属性的setter

计算属性默认是getter，在HTML中的值发生改变时会直接调用get（），他会定义一个方法并且根据其中的条件返回一个值，

get() {
                        // 获取结果
                        const res = this.fruitList.every(v => {
                            // 简化
                            return v.isChecked
                        })
                        // 返回结果
                        return res
                    },
                    
                    
                    
可读性比较好的写法
const res = this.fruitList.every(v => {
                    可读性比较好的写法
                    if(v.isChecked===true){
                      return true
                    }else{
                      return false
                    }                        
                  })
                  // 返回结果
                  return res

但是在computed定义的对象除了默认有get方法之外，也提供了一个set。与get不同，get通过{{compueted对象名}}直接默认调用get方法并且返回一个值，但是setter方法可以解决computed属性名被赋值时的问题，而且set方法中写的是逻辑主要是处理--计算属性被赋值时，被赋值的就是以实参value传递给set（）方法。

set(value) {
                      
                        /*vule时ischeckAll传过来的全选按钮的状态值*/
                        /*v.isChecked是指的fruitList数组每个元素的选中状态的布尔值，它们全部受全选按钮状态的影响*/
                        this.fruitList.forEach(v => {
                            v.isChecked = value
                        })
                    }
                },