SOURCE

const ap=new Vue({
  el:'#app', 
	data:{ 
		message:'计算属性的缓存',      
       firstName:'Hde',
       lastName:'bryant',
	},
    methods:{
        getfullname:function(){
           return this.firstName+' '+this.lastName;
        }
    },
    //计算属性()
    computed:{
        fullName:function(){
            //有缓存，只调用一次
          return this.firstName+' '+this.lastName;
        }
    },	
}); 

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app" style="max-width:800px;height:400px">	
	<h2>{{message}}</h2>
    <!--过于繁琐，不建议使用-->
    <h2>直接拼接：{{firstName}}{{lastName}}</h2>
    <h2>通过定义methods: {{getfullname()}}</h2>
    <h2>通过computed: {{fullName}}</h2>
</div>