vue系列学习（一）——计算属性缓存 vs 方法的理解

关于计算属性computed和方法methods的区别，通常一样的功能，二者都可以实现。那么到底改i如何选择呢？

这是官网的解释：
为了更好的理解这段话，我们来做一个简单的实验
1，使用方法

<template>
  <div class="hello">
  	//注意这里调用了两遍reversedMessage
    <p>Reversed message: "{{ reversedMessage() }}"</p>
    <p>Reversed message: "{{ reversedMessage() }}"</p> 
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: 'hello',
    }
  },
  methods: {
     reversedMessage: function() {
       console.log('调用方法')
       return this.message.split('').reverse().join('');
     }
  }
}
</script>

控制台打印结果

2，使用计算属性

<template>
  <div class="hello">
  	//注意这里调用了两遍reversedMessage
    <p>Reversed message: "{{ reversedMessage }}"</p>
    <p>Reversed message: "{{ reversedMessage }}"</p> 
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: 'hello',
    }
  },
  computed: {
      reversedMessage: function () {
      console.log('调用了计算属性')
      return this.message.split('').reverse().join('')
     }
  }
}
</script>

控制台打印结果为

对比之下不难看出，计算属性是有缓存的，并且是基于响应式依赖，如上述例子，如果message没有改变，那么将不再重新计算属性，而是从缓存中直接返回上一次的计算结果；而用方法，则每一次调用都会重新执行方法。