vue中computed和watch

一、computed和method的区别

1我们可以把同一个函数定义为一个方法method而不是计算属性computed，两种方式最后的结果是一样的；

2.不同的是，计算属性computed是基于他们的依赖进行缓存的，只有相关依赖的值发生改变才会重新求值（因为它会对已经计算过的结果进行缓存），当它所依赖的值没有发生改变时，我们访问这个计算属性他会立即出现结果；

3而方法Method只要被触发就会再次执行该函数，会重新求值，

（相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。）

4.如果我们不希望有缓存，就用method来代替。

二、computed和watch区别

类型	是否被缓存	备注
computed	是	只要依赖值有变化就会立马执行
method	否	需要绑定事件

很多情况下，我们会选择使用computed而不去用watch，但是当我们需要在数据变化时执行异步或者开销比较大的情况下，此时选用watch（官网所述）

类型	目的	备注
computed	依赖变动时更新数据	更新数据
watch	观察某一特定的值，执行特定的函数	观察数据

computed，是一个计算的属性，类似过滤器，对数据进行处理后return一个新的state，并且可以监听该返回值的变化；

watch是监听数据变化，可以调用其他方法或者做一些事情，它是一个动作；

大多数情况下我们会选择使用computed，因为它会进行缓存:

（我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！）

在什么情况下使用watch？进行异步请求

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }//computed用法

 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
    }
  }//watch用法