vue2计算属性computed

1.什么是计算属性

概念：

        1.计算属性是vue的一个特性，此属性有计算能力，也就相当于一个函数。可以将计算结果缓存，作为一个属性使用。

特点： 

        1.要在 methods: { } 或者 computed： { } 中 ，以方法（函数）的形式定义。

        2.之后要使用就可以直接使用属性名代替这个重复的计算。

好处：

        1.可以实现代码复用

        2.计算属性就会自动重新求值，只要计算源数据任何一项发生了变化，计算属性都会立刻更新，实现动态计算。

---

eg:我们先看个小例子：

 

    通过输入 r、g、b来改变box的背景色，其中有个  `rgb(${r}, ${g}, ${b})` 多次使用

为了提高代码的复用，我们可以使用计算属性 computed 

 2.计算属性computed

优点：

1.支持缓存，当数据源发生变化，会随即重新计算；

2.不支持异步，无法监听异步操作导致的数据变化；

3.如果一个属性是由其他属性计算而来，形成了一对一、多对一，就可以使用 computed；

4.代码演示：

 computed: {
            rgb() {
                //返回一个字符串，可被当作rgb字符串使用
                //r、g、b中的任意一个发生变化 rgb都会发生改变
                return `rgb( ${this.r}, ${this.g}, ${this.b} )`
            }
        }

之后所有的 `rgb(${r}, ${g}, ${b})` 都可以用 rgb 代替 ，优化后的代码如下：

 感谢浏览！