vue中计算属性

一，计算属性干什么用的        

在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

好处：

• 依赖于数据，数据更新，处理结果自动更新；
• 计算属性内部 this 指向 vm 实例；
• 在 template 调用时，直接写计算属性名即可；
• 常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据；
• 相较于 methods，不管依赖的数据变不变，methods 都会重新计算，但是依赖数据不变的时候 computed 从缓存中获取，不会重新计算。

二，计算属性中的缓存机制

举一个简单的例子：

        点击第二页，让第一条数据序号从3开始，点第三页从5开始

 第一种：直接在定义一个方法

 

 第二种：使用computed计算属性

      可以看到使用methods方法时需要携带参数，而使用computed计算属性则不需要，原因就是使用methods方法时不管依赖的数据变不变，methods 都会重新计算，但是依赖数据不变的时候 computed 从缓存中获取，不会重新计算。