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 代替 
















，优化后的代码如下：

 感谢浏览！