一、起因？

虽然在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.在模板中放入太多的逻辑会让模板过重且难以维护.

比如：

     
          {
    { message.split('').reverse().join('') }}
     

这样,模板不再简单和清晰.在实现反向显示message之前,你应该通过一个函数确认它.

所以,Vue.js提供了计算属性来让我们去处理实例中的复杂逻辑.

计算属性(computed properties)就是不存在于原始数据中,而是在运行时实时计算出来的属性.

通过四种方式让数据在页面显示出来,推荐使用后面2种:

    
         
         
             
     
    
      
初始值:{
   { message }}
    
      
翻转值:{
   { message.split('').reverse().join('') }}
    
      
函数调用:{
   { reverseStr() }}
    
      
计算属性:{
   { reverse }}
     

二、计算属性 和 Methods的区别？

    当页面重新渲染(不是刷新)的时候,计算属性不会变化,直接读取缓存使用,适合较大量的计算和改变频率较低的属性;

    而method,就是当页面重新渲染的时候(页面元素的data变化,页面就会重新渲染),都会重新调用method.

    如果不希望有缓存,我们可以用method取代computed.

    疑惑：为什么需要缓存？

    假设我们有一个重要的计算属性A, 这个计算属性需要一个巨大的数组遍历和做大量的计算.然后我们可能有其他的计算属性依赖于A.如果没有缓存,我们将不可避免的多次执行A的getter方法

    

三、计算属性的setter方法

    计算属性默认只有getter,不过在需要时你也可以提供一个setter.

    
         
         
             
     
    
      
{
   { showinfo }}
    
      调用计算属性的setter方法
     

在上面的案例中，计算属性showinfo的值始终取决于name 和 age.

计算属性默认只有 getter ，当然在需要时我们也可以提供一个 setter .

计算属性被设计出来的目的在于：getter 是干净无副作用的.