Vue中computed，methods，watch的区别？

computed

computed看上去是方法，但是实际上是计算属性，用于监听需要依赖其它属性而进行计算得来的值。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算。而只要依赖的数据不更改他就不会去重新计算更新，而method里面的方法则是每次刷新都会去执行。

methods

methods是方法，通常的使用场景是 Vue 组件，可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

methods 里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像 watch 和 computed 那样，“自动执行”预先定义的函数。

例：

new Vue({
  el: '#app',
  template: '<div id="app"><p>{{ say() }}</p></div>',
  methods: {
    say: function () {
      return '你好，jenkin！'
    }
  }
})

watch

观察和响应 Vue 实例上的数据变动

⚠️注意

 监听的属性需要在data中定义，watch回调函数不可以使用箭头函数，因为箭头函数绑定了父级作用域的上下文，所以this 不是指向 Vue 实例。

✅应用场景

• 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
• 用来处理当一个属性发生变化时，需要执行某些具体的业务逻辑操作。
• 一个数据改变影响多个数据。例如用来监控路由、inpurt 输入框值的特殊处理等。

vue中 methods watch和computed的区别

三者的加载顺序

computed是在HTML DOM加载后马上执行的。

methods则必须要有一定的触发条件才能执行。

watch呢？它用于观察Vue实例上的数据变动。

默认加载的时候

先computed再watch，不执行methods；

触发某一事件后

先computed再methods再到watch

总结

1.computed是在 DOM加载后马上执行的，如赋值；

2.methods要有一定的触发条件才能执行，如点击事件；

3.watch用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。

4.methods是通过事件驱动来执行函数的是被动的，
   watch、computed是当监听的数据发生变化时主动执行这个函数。

5.如果一个数据依赖于其他数据，那么把这个数据设计为computed的  。

6.如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

7.watch模式没有computed模式简单，但watch比较适合做异步的操作。

8.相比于watch/computed，methods不处理数据逻辑关系，只提供可调用的函数

9.methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，可以自动调用，完成我们想要完成的效果。