vue的计算属性(computed)

目录

计算属性的使用

计算属性的setter和getter

计算属性和methods方法的对比

---

计算属性的使用

在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。这时就可以通过计算属性的语法显示，计算属性是写在实例的computed选项中的。
如 我们需要将data中的firstName和lastName结合起来显示在html中：
js:

html:
（1）直接通过插值语法显示：

（2）通过计算属性的语法显示：

运行结果：

可见用两种方法的结果都一样，但是第二种使html页面更简便。

看一个比较复杂的例子：求books中price之和，此时用计算属性的方法更为简单

运行结果：

计算属性的setter和getter

每个计算属性都包含一个getter和一个setter

因为计算属性一般是没有set方法的，为只读属性。所以通常简写为:

计算属性和methods方法的对比

用methods方法和计算属性分别将数据渲染三次

页面运行结果：

可以看到，用计算属性的方法和用methods的方法运行的结果一样。

再来看控制台的运行结果：

可以看到，用methods的方法渲染数据，控制台打印了三次，而用计算属性的方法渲染数据，控制台只打印了一次。

总结：用计算属性的方法调用数据，因为存在缓存，所以只调用了一次；而用methods的方法调用数据，不存在数据缓存，所以需要几次就会调用几次。