vue中methods computed watch的区别

在有些情况中，看似methods computed（计算属性） watch（侦听属性）三种方法都可以用，这三者用哪个更适合呢？那就要要先明白三者之间的不同之处

1.执行情况

methods中方法在每次调用时都会执行
而computed和watch则会在相关数据改变时才会执行
computed具有缓存作用，计算属性是基于它们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值（即：计算的属性依赖于一个或多个数据的变化，这些数据中存在任一个变化，computed该计算属性都会执行，不变化，则取缓存中的数据）
watch监听的数据变动（该数据必须来源于data和prop中的数据）会影响依赖于该数据的属性/数据的变动
示例：

WechatIMG181.png WechatIMG182.png

执行结果：

WechatIMG183.png

与computed相比 watch的实现方法

WechatIMG184.png

上述可见，从执行情况来讲，对于性能开销比较大的计算，推荐computed和watch，若不期望存在缓存，用methods；
同时，computed与watch也可以实现同样的效果，而与watch（上面代码是命令式且重复的）相比，computed在书写上较为简洁，通常更好的做法是使用计算属性而不是命令式的 watch 回调；但当需要在数据变化时执行异步或开销较大的操作时，watch是最有用的
示例：

WechatIMG185.png

此外
computed可以实现对象的深层监听；而watch只有对对象重新赋值时视图才会更新；当然，watch借助handler和deep也可以实现深度监听
示例：

WechatIMG189.png

总体来讲 三者的区别大致先写到这，后序持续更新，小伙伴们根据实际情况选用合适的即可
有不同意见也欢迎评论区留言