夜光带你走进Vue.js（十一）擅长的领域

夜光序言：

 

我也曾数十次地感受着秋意带来生活特别的感触，以及带来了生活不同的意义。在过去二十二载的秋季之时，不曾以笔绘秋，以文摹凉。秋季带给除了童年时候与伙伴一起嬉戏的情景，不曾认真的感受秋真正的面貌和内涵。

 

 

 

 

正文：

Vue.js 计算属性

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符串的例子：

 

<template>
  <div id="app">
    {{ message.split('').reverse().join('') }}
    <p>原始字符串: {{ message }}</p>
    <p>计算后反转字符串: {{ reversedMessage }}</p>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        type:'C',
        message:'Yeguang'
      }
    },
    computed:{
      //计算属性的getter
      reversedMessage:function () {
        // this 指向 vm实例
        return this.message.split('').reverse().join('')
      }
    }
  }
</script>
<style>

</style>

上述声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

---

嗯唔：computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。