Vue中-计算属性computed和methods方法有什么区别

一. 在App.vue中

<template>
  <div>
      <p>{{reverseMessage}}</p>
      <p>{{reverseMessage}}</p>
      <p>{{reverseMessage}}</p>
      <p>{{getMessage()}}</p>
      <p>{{getMessage()}}</p>
      <p>{{getMessage()}}</p>
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg: 'Hello,Vue'
        }
    },
    computed: {
        reverseMessage(){
            console.log('计算属性执行了')
            return this.msg.split("").reverse().join("")
        }
    },
    methods: {
        getMessage(){
            console.log('函数执行了')
            return this.msg.split("").reverse().join("")
        }
    }
}
</script>

<style>

</style>

 二. 浏览器中

 

 三. 经过上面代码及log打印结果来看我们可以得出下面结论

a.计算属性根据依赖变量结果缓存，依赖变化重新计算结果存入缓存，比普通方法性能更高

b.methods方法调用一次就会触发一次

c.计算属性使用的方法和data一样不需要()

d.计算属性和methods执行的结果都是一样的

e.使用任何复杂的逻辑方法应当使用计算属性