vue之结合methods和watch理解计算属性computed

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简练的多了。

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