小仙女总结computed、methods以及watch的区别

computed:

computed计算属性是基于他们的依赖进行缓存的，computed只有在它的相关依赖发生改变时才会重新求值

不需要在data中直接声明出要计算的变量。

计算属性默认只有getter，可以在需要的时候自己设定setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

擅长处理的情景：一个数据受多个数据影响

watch:

侦听器watch是侦听一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以监听当前页码，当页码变化时执行对应的获取数据的函数。

如果在data中没有相应的属性的话，是不能watch的，这点和computed不一样。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

擅长处理的情景：一个数据影响多个数据

虽然计算属性在大多数情况下是非常适合的，但是在有些情况下我们需要自定义一个watcher，在数据变化时来执行异步操作，这时watch是非常有用的。

methods:

只要发生重新渲染，methods调用总会执行该函数。

数据量大，需要缓存的时候用computed；每次确实需要重新加载，不需要缓存时用methods。

为什么需要缓存？
举例：假设我们有一个性能开销比较大的的计算属性 A ，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用methods来替代。但对于每次都需要进行重新计算的属性比如下面这个函数的返回值 function () { return Date.now() } ，我们最好使用 methods。