一,计算属性干什么用的
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。
好处:
- 依赖于数据,数据更新,处理结果自动更新;
- 计算属性内部 this 指向 vm 实例;
- 在 template 调用时,直接写计算属性名即可;
- 常用的是 getter 方法,获取数据,也可以使用 set 方法改变数据;
- 相较于 methods,不管依赖的数据变不变,methods 都会重新计算,但是依赖数据不变的时候 computed 从缓存中获取,不会重新计算。
二,计算属性中的缓存机制
举一个简单的例子:
点击第二页,让第一条数据序号从3开始,点第三页从5开始
第一种:直接在定义一个方法
第二种:使用computed计算属性
可以看到使用methods方法时需要携带参数,而使用computed计算属性则不需要,原因就是使用methods方法时不管依赖的数据变不变,methods 都会重新计算,但是依赖数据不变的时候 computed 从缓存中获取,不会重新计算。