computed、watch、methods的区别

一、简介

1、watch

watch用于监听数据变化，来完成响应式。当监听数据变化，watch会触发对应的回调函数。 回调函数中有两个参数，该数据的新旧值。如果需要第一次进入就监听，需要开启immediate：true

watch: {
  name: function(newValue, oldValue) {
    console.log('name changed from', oldValue, 'to', newValue)
  }，
  immediate：true
}

2、Computed

Computed是计算属性，可以配置一个或多个数据，并在其中编写回调函数，当该数据发生变化，即触发函数重新计算，并将返回值渲染到页面上。

computed: {
  fullName: function() {
    return this.firstName + ' ' + this.lastName
  }
}

3、methods

Methods是vue中配置方法函数的配置项，触发其中的函数时会执行。

methods: {
  sayHello: function() {
    console.log('Hello, World!')
  }
}

二、区别

• watch可以进行异步等复杂逻辑的监听，在数据变化后立即执行回调。
• computed有返回值，可以缓存，节约性能。
• method与上面两个方式相比，需要手动调用。