computed 计算属性细节

在平常的开发中，对计算属性computed计算属性也不是很熟悉，今天看了一下API，发现了computed的一些绝密宝藏技巧。

计算属性：顾名思义可以理解为 可以进行复杂逻辑、大量计算的一种属性

例如：

<div id="example">
  <p>Computed reversed message: "{{ reversedMessage }}</p>
</div>

  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例，在计算属性里对字符串进行了反转
      return this.message.split('').reverse().join('')
    }
  }

宝藏1：计算属性缓存 VS 方法

<p>{{computedMessage}}</p>

<p>{{FNMessage()}}</p>

data:{
    message:'hello'
}

computed:{
   
    computedMessage: function () {
     
          return this.message.split('').reverse().join('')

    }
}

methods:{

    FNMessage: function () {

        return this.message.split('').reverse().join('')

    }
}

上面计算属性  computedMessage 结果和方法 FNMessage 结果完全相同

得出：

我们可以将同一函数定义为一个方法和一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。

只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 computedMessage计算属性会立即返回之前的计算结果（缓存：我称之为对象缓存），

而不必再次执行函数，减少了性能损耗，这就是计算属性优势。

 

 

2、计算属性 VS  watch监听

 　　官网解释的应该更清楚 https://cn.vuejs.org/v2/guide/computed.html