【Vue】Vue中methods，computed（计算属性），watch（监听数据）的区别

触发时机
watch: 被 watch 的值变化的时候执行一个函数
methods: getMessage() 出现在视图里的时候，或视图更新的时候调用 getMessage
computed: 两个调试同时满足的时候：一、依赖的属性变化了 二、message 出现在视图里了或视图更新了

使用形式
watch 的值需要用 data 承载，本身返回值没有用
methods 的返回值可以直接展示在视图，但是要加括号
computed 不能加括号

先看下面这段代码：

  +1
  -1
  

    {{value}} 
  
 
  
  

我们想实现一个需求：当value大于5，就显示警告
1， 用methods来实现：

  +1
  -1
  

    {{value}} {{getMessage()}}
  
 
  
  

2，用watch来实现：

  +1
  -1
  

    {{value}} {{message}}
  
 
  
  

3，用computed来实现：

 

  +1
  -1
  

    {{value}} {{message}}
  
 
  
  

可以看到，三种方式都可以实现同一个需求。

不同点：

使用形式的不同：
1，watch 的值需要用 data 承载，本身返回值没有用
2，methods 的返回值可以直接展示在视图，但是要加括号
3，computed 不能加括号
触发时机的不同：
1，watch: 被 watch 的值变化的时候执行一个函数
2，methods: getMessage() 出现在视图里的时候，也可以在事件的回调里面使用
3，computed：当其依赖的属性变化时就会自动执行

以下来自vue官网：
1，三种两种方式的最终结果确实是完全相同的
2，对于任何复杂逻辑，你都应当使用计算属性。因为计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。如果依赖的值没变，你访问message会立即返回之前计算的结果
3，相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
4，我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
5，什么时候使用watch？虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。