【vue】计算属性

vue官网对于计算属性的描述：

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。

计算属性的使用

当我们有一个数组对象，想要在页面中直接展示数组对象某一个值的总和时，我们可以使用method或者使用计算属性。后续为什么使用计算属性，而不用method后文会提及到的。

页面展示书的总价这里就使用了计算属性，在计算属性中定义一个值，可以在页面中直接使用。

计算属性的getter和setter

了解js的对象的都知道，对象中的值，赋值和取值分别有两个方法：赋值：set，读值：get
完整的计算属性写法：

 computed:{
    totalPrice:{
    	get:function(){
    		 const total = this.bookslist.reduce((prev,item) =>{
     			  return item.price + prev;
     		},0)
    		return total
    	},
    	set:function(){
           
        },
    }
  }

计算属性与method方法对比

以刚才的例子为例，在method中封装了相同的方法，进行对比：

在页面中调用了相同次数，在计算属性和方法中都进行了log，在控制台里：

在方法中，调用了几次就log了几次，但是计算属性只执行了一次。原因是：

计算属性是基于它们的响应式依赖进行缓存的
只要this.bookslist没又发生改变，他相关的计算属性，还是会读取上一次的计算属性执行后的值–计算属性的缓存。无须再次执行函数–这就是与method的区别。