05.计算属性

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

<template>
  <div>
    {{ name.split('').reverse().join('') }}
  </div>
</template>
<script>
export default {
  data(){
    return {
      name : 'tom'
    }
  }
}
</script>

在这种情况下，模板不再简单和清晰。为了解决这种情况，vue推荐使用计算属性

例子：

<template>
  <div>
    {{ reversedMessage }}
  </div>
</template>
<script>
export default {
  computed:{
    reversedMessage(){
      return this.name.split('').reverse().join('')
    }
  },
  data(){
    return {
      name : 'tom'
    }
  }
}
</script>

你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果：

<template>
  <div>
    {{ reversedMessage() }}
  </div>
</template>
<script>
export default {
  data(){
    return {
      name : 'tom'
    }
  },
  methods:{
    reversedMessage(){
      return this.name.split('').reverse().join('')
    }
  }
}
</script>

不经过计算属性，我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 name的值没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。比如下面的例子 ：

<template></template>
<script>
export default {
  methods:{
    getResult(){
      console.log('开始 :' + Date.now());
      let a = 0;
      for(let i=0; i<1000000; i++){
        a = Math.cos(a + i * 95 / 2);
      }
      console.log('结束 :' + Date.now());
      return a;
    }
  },
  created(){
    console.log(this.getResult());
    setTimeout(()=>{
      console.log(this.getResult());
    },2000);
  }
}
</script>

getResult的内部执行了挺复杂的计算，而且循环一百万次。通过log打印出两次的时间戳，大概得出，计算出a的值需要花费200毫秒左右。

然后改成用计算属性试试 

<template></template>
<script>
export default {
  computed:{
    getResult(){
      console.log('开始 :' + Date.now());
      let a = 0;
      for(let i=0; i<1000000; i++){
        a = Math.cos(a + i * 95 / 2);
      }
      console.log('结束 :' + Date.now());
      return a;
    }
  },
  created(){
    console.log(this.getResult);
    setTimeout(()=>{
      console.log(this.getResult);
    },2000);
  }
}
</script>

第一次也需要花费200毫秒左右才能得到a的值，但是第二次则马上能得到a的值。（注意，只打印了一次开始和结束）

这就说明，第二次获取a的值并没有去真正的做运算，而是直接返回了a的缓存。