[Vue]method与计算属性computed、侦听器watch与计算属性computed的区别

一.方法method与计算属性computed的区别

方法method：每当触发重新渲染时，调用方法method将总会再次执行函数；

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

二.侦听器watch与计算属性computed的区别

1.watch监听的是一个变量（或者一个常量）的变化，这个变量可能是一个单一的变化也可能是一个数组。computed可以监听很多个变量，但是这个变量一定是vue实例里面的。

2.

计算属性computed：如果只是监听数据的变动更好的做法是使用计算属性而不是侦听器watch；

侦听器watch：当需要在数据变化时执行异步或开销较大的操作时，侦听器watch是最有用的（至于为什么此时不能用计算属性computed还没有查到依据，有小伙伴知道的可以回复一下~）；

另外：计算属性computed的setter

计算属性默认只有 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]
    }
  }
}

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。