vue中计算属性computed和methods函数的对比

<div id="app">
  <!--  1、通过字符串直接拼接，一般不适用，语法过于繁琐-->
  <h2>{
    
    {
    
    firstName+' '+lastName}}</h2>
  <h2>{
    
    {
    
    firstName}} {
    
    {
    
    lastName}}</h2>
  <!--  2、直接定义methods函数-->
  <h2>{
    
    {
    
    getFullName()}}</h2>
  <h2>{
    
    {
    
    getFullName()}}</h2>
  <h2>{
    
    {
    
    getFullName()}}</h2>
  <h2>{
    
    {
    
    getFullName()}}</h2>
  <h2>{
    
    {
    
    getFullName()}}</h2>
  <!-- 3、通过computed计算属性-->
  <h2>{
    
    {
    
    fullName}}</h2>
  <h2>{
    
    {
    
    fullName}}</h2>
  <h2>{
    
    {
    
    fullName}}</h2>
  <h2>{
    
    {
    
    fullName}}</h2>
<!--  其中2和3相比看起来差不多，当时当进行多次调用的时候就开始不一样了
      2在每次调用的时候都会重新执行一下函数，
      3在每次调用的时候只要执行一次属性中的函数就可以了，计算机对其进行了缓存，
      每次调用的时候它会进行比较属性值是否发生改变，如果没有改变，那么直接返回，如果改变，就重新调用。
      所以相比之下3的性能是要高于2的，这也是为什么大多数情况下要使用3而不用2。
-->
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    
    
    el: '#app',
    data: {
    
    
      firstName:'lebron',
      lastName:'james'
    },
    computed:{
    
    
      fullName:function () {
    
    
        console.log('fullName')
        return this.firstName+' '+this.lastName
      }
    },
    methods:{
    
    
      getFullName:function () {
    
    
        console.log('getFullName()')
        return this.firstName+' '+this.lastName
      }
    }
  })
</script>