下面Demo说明method和computed的区别

<template>
  <div class="box">
    <div>
      <button @click="a++">点击A+1</button>
      <span>A的值：{{a}}</span>
    </div>
    <div>
      <button @click="b++">点击B+1</button>
      <span>B的值：{{b}}</span>
    </div>
    <div>Age + A = {{addToA()}}</div>
    <div>Age + B = {{addToB()}}</div>
  </div> 
</template>
<script>
export default {
  data () {
    return {
     a: 0,
     b: 0,
     age: 20
    }
  },
  methods: {
    addToA() {
      console.log('Add to A')
      return this.a + this.age
    },
    addToB() {
      console.log('Add to B')
      return this.b + this.age
    }
  } 
}
</script>

上面代码页面加载时候，日志就同时打印出

执行结果.png

因为渲染DOM时，会去执行addToA()和addToB()。因此当再次点击任一按钮，改变a或者b的值时，又会从新渲染DOM，导致addToA()和addToB()又同时执行一次。如此，会很耗费性能。

使用computed

<template>
  <div class="box">
    <div>
      <button @click="a++">点击A+1</button>
      <span>A的值：{{a}}</span>
    </div>
    <div>
      <button @click="b++">点击B+1</button>
      <span>B的值：{{b}}</span>
    </div>
    <div>Age + A = {{addToA}}</div>
    <div>Age + B = {{addToB}}</div>
  </div> 
</template>
<script>
export default {
  data () {
    return {
     a: 0,
     b: 0,
     age: 20
    }
  },
  methods: { 
  },
  computed: {
    addToA() {
      console.log('Add to A')
      return this.a + this.age
    },
    addToB() {
      console.log('Add to B')
      return this.b + this.age
    }
  }
}
</script>

这时，再去刷新页面，加载时同样出现上图一样的执行结果，不过此时点击【点击A+1】，只会执行addToA方法，不会执行addToB方法。
注意：代码中的细节

<!--修改后-->
<div>Age + A = {{addToA}}</div>
<div>Age + B = {{addToB}}</div>
<!--修改前-->
<div>Age + A = {{addToA()}}</div>
<div>Age + B = {{addToB()}}</div>

总结

computed多用于耗时或计算性能开销比较大的属性