理解computed并不难，但是我认为结合methods和watch去理解的话，会更透彻更有条理，所以整理了下面的知识：

我的其他文章，也可以了解一下：
【使用vue-cli（vue脚手架）快速搭建项目】：https://www.jianshu.com/p/1ee1c410dc67
【vue之父子组件间通信实例讲解（props、ref 、 emit ）】：
https://www.jianshu.com/p/91416e11f012
【vue之将echart封装为组件】：
https://www.jianshu.com/p/ec39019e2141
【理解vue实例的生命周期和钩子函数】：
https://www.jianshu.com/p/98517bd49179
【vue之事件修饰符的使用】：
https://www.jianshu.com/p/cbe77baee153

1. 从methods的角度理解

我们可以在模板内使用表达式进行简单的计算：

<template>
  <div> Reversed message: "{{ message + 'OPQ'}}"</div>
</template>

但是对于相对复杂一点的逻辑，我们一般会调用方法处理然后再返回结果:

<template>
  <div> Reversed message: "{{revMessage()}}"</div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        message: "ABCDEFG"
      }
    },
    methods: {
      revMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }
  }
</script>

运算结果

methods很好的处理了这些相对复杂的逻辑计算，但是methods有两个特性：

• methods是交互方法，需要主动去触发
• methods每次计算后都会把变量回收，再次访问的时候会重新计算。

如果想缓存计算结果，这个时候就可以用到computed了：

<template>
  <div> Reversed message: "{{revMessage}}"</div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        message: "ABCDEFG"
      }
    },
    computed: {
      revMessage: function () {
        return this.message.split('').reverse().join('')
      }
    }
  }
</script>

运算结果

为了更理解computed的特性，我们通过调试台改变message的值：

调试结果

我们可以看到，在改变message的值之前，使用methods和computed得到的结果是一样，而当我们去改变message的值以后会自动触发revMessage，对字符串进行翻转。

通过上面的例子，应该能大概理解computed相对于methods的一些特性了，下面我还是进行一下总结：

• methods是交互方法需要主动去触发，而computed则是在检测到data数据变化时自动触发的。
• methods是一次性无缓存的计算，computed则是有缓存的。methods每次计算后都会把变量回收，再次访问的时候会重新计算。而computed则是依赖数据的，数据占用内存是不会被回收掉的，再次访问的时候不会重新计算，而是返回上次计算的值，当依赖的数据发生改变时才会再次计算。

2. 从watch的角度理解

理解了methods和computed两者的区别以后，熟悉AngularJS或者Avalon.js的人可能会发现，其实computed和watch迷之相似，都是在关注一个数据，并在数据发生变化的时候做出反应。没错，很相像，但是vue认为大部分时候使用计算属性，会比使用watch监听更优，我们看看下面两个的例子：

//watch的例子
<template>
  <div>message: {{all}}</div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        all:'ABCEFG',
        message1:'ABC',
        message2:'EFG'
      }
    },
    watch: {
      message1: function (val) {
        this.all = val+ this.message2
      },
      message2: function (val) {
        this.all = this.message1+ val
      }
    },
    mounted(){
      window.vue = this
    }
  }
</script>

//computed的例子
<template>
  <div>message: {{all}}</div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        message1:'ABC',
        message2:'EFG'
      }
    },
    computed: {
      all: function () {
        return this.message1 + this.message2
      },
    },
    mounted(){
      window.vue = this
    }
  }
</script>

这两段代码都是在做同一件事，监听message1和message2，在任何一个数据有变化的时候触发回调，更新两者合并的值。但是可以看到，使用watch的话需要分开两次去监听，然后再分开两边执行回调，相比之下使用computed简练的多了。
当然，不是所有情况下使用computed都会更优，可以看看官网的解释：#watch侦听器#