vue之结合methods和watch理解计算属性computed-原创手记-慕课网

理解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

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>

265

运算结果

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>

265

运算结果

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

403

调试结果

我们可以看到，在改变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侦听器#

作者：四小七
链接：https://www.jianshu.com/p/2243fd51d79a