【Vue】Vue中methods，computed，watch的区别

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

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

先看下面这段代码：

<div id="app">
  <button @click='value+=1'>+1</button>
  <button @click='value-=1'>-1</button>
  <div>
    {{value}} 
  </div>
 </div>
  <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          value: 1,
        }
      },
      methods: {
 
      }
    })
  </script>

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

<div id="app">
  <button @click='value+=1'>+1</button>
  <button @click='value-=1'>-1</button>
  <div>
    {{value}} {{getMessage()}}
  </div>
 </div>
  <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          value: 1,
        }
      },
      methods: {
       getMessage() {
         return this.value>5? '警告':''
       }
      }
    })
  </script>

2，用watch来实现：

<div id="app">
  <button @click='value+=1'>+1</button>
  <button @click='value-=1'>-1</button>
  <div>
    {{value}} {{message}}
  </div>
 </div>
  <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          value: 1,
          message: ''
        }
      },
      watch: {
        value() {
          if(this.value > 5) {
            this.message = '警告'
          }
        }
      },
      // methods: {
      //  getMessage() {
      //    return this.value>5? '警告':''
      //  }
      // }
    })
  </script>

3，用computed来实现：

 <div id="app">
  <button @click='value+=1'>+1</button>
  <button @click='value-=1'>-1</button>
  <div>
    {{value}} {{message}}
  </div>
 </div>
  <script src="https://cdn.bootcss.com/vue/2.6.6/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          value: 1,
        }
      },
      computed: {
        message() {
          return this.value>5 ? '警告': ''
        }
      },
      // watch: {
      //   value() {
      //     if(this.value > 5) {
      //       this.message = '警告'
      //     }
      //   }
      // },
      // methods: {
      //  getMessage() {
      //    return this.value>5? '警告':''
      //  }
      // }
    })
  </script>

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

不同点：

使用形式的不同：
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 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。