vue(计算属性computed和methods对比)

计算属性computed和methods对比

<template>
  <div>
    <h1>{{ getMsgName() }}</h1>
    <h2>{{msgname}}</h2> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'H',
      name:'hell999lll'
    }
  },
  //计算属性,本质上就是属性,使用时不需要()
  //有缓存调用一次,效率更高,只有数值变化了,才会再次调用
  computed:{
    msgname:function(){
      return this.msg+this.name
    }

  },
  //每次使用都会调用
  methods:{
    getMsgName:function(){
        return this.msg+this.name
    }
  }
}
</script>