watch和computed区别

 

 

总结：

　　watch和computed都是以Vue的依赖追踪机制为基础的，当某一个依赖型数据（依赖型数据：简单理解即放在 data 等对象下的实例数据）发生变化的时候，所有依赖这个数据的相关数据会自动发生变化，即自动调用相关的函数，来实现数据的变动。

　　当依赖的值变化时，在watch中，是可以做一些复杂的操作的，而computed中的依赖，仅仅是一个值依赖于另一个值，是值上的依赖。 

 

应用场景：

　　computed：用于处理复杂的逻辑运算；一个数据受一个或多个数据影响；用来处理watch和methods无法处理的，或处理起来不方便的情况。例如处理模板中的复杂表达式、购物车里面的商品数量和总金额之间的变化关系等。

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

 

区别：　　

computed

• 初始化显示或者相关的 data、props 等属性数据发生变化的时候调用；

• 计算属性不在 data 中，它是基于data 或 props 中的数据通过计算得到的一个新值，这个新值根据已知值的变化而变化；

• 在 computed 属性对象中定义计算属性的方法，和取data对象里的数据属性一样，以属性访问的形式调用；

• 如果 computed 属性值是函数，那么默认会走 get 方法，必须要有一个返回值，函数的返回值就是属性的属性值；

• computed 属性值默认会缓存计算结果，在重复的调用中，只要依赖数据不变，直接取缓存中的计算结果，只有依赖型数据发生改变，computed 才会重新计算；

• 在computed中的，属性都有一个 get 和一个 set 方法，当数据变化时，调用 set 方法。

watch

• 主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是 computed 和 methods 的结合体；

• 可以监听的数据来源：data，props，computed内的数据；

• watch支持异步；

• 不支持缓存，监听的数据改变，直接会触发相应的操作；

• 监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是新值，旧值。

 

https://www.cnblogs.com/dhui/p/12957862.html#:~:text=%20watch%E5%92%8Ccomputed%E9%83%BD%E6%98%AF%E4%BB%A5Vue%E7%9A%84%E4%BE%9D%E8%B5%96%E8%BF%BD%E8%B8%AA%E6%9C%BA%E5%88%B6%E4%B8%BA%E5%9F%BA%E7%A1%80%E7%9A%84%EF%BC%8C%E5%BD%93%E6%9F%90%E4%B8%80%E4%B8%AA%E4%BE%9D%E8%B5%96%E5%9E%8B%E6%95%B0%E6%8D%AE%EF%BC%88%E4%BE%9D%E8%B5%96%E5%9E%8B%E6%95%B0%E6%8D%AE%EF%BC%9A%E7%AE%80%E5%8D%95%E7%90%86%E8%A7%A3%E5%8D%B3%E6%94%BE%E5%9C%A8,data%20%E7%AD%89%E5%AF%B9%E8%B1%A1%E4%B8%8B%E7%9A%84%E5%AE%9E%E4%BE%8B%E6%95%B0%E6%8D%AE%EF%BC%89%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E6%89%80%E6%9C%89%E4%BE%9D%E8%B5%96%E8%BF%99%E4%B8%AA%E6%95%B0%E6%8D%AE%E7%9A%84%E7%9B%B8%E5%85%B3%E6%95%B0%E6%8D%AE%E4%BC%9A%E8%87%AA%E5%8A%A8%E5%8F%91%E7%94%9F%E5%8F%98%E5%8C%96%EF%BC%8C%E5%8D%B3%E8%87%AA%E5%8A%A8%E8%B0%83%E7%94%A8%E7%9B%B8%E5%85%B3%E7%9A%84%E5%87%BD%E6%95%B0%EF%BC%8C%E6%9D%A5%E5%AE%9E%E7%8E%B0%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8F%98%E5%8A%A8%E3%80%82%20%E5%BD%93%E4%BE%9D%E8%B5%96%E7%9A%84%E5%80%BC%E5%8F%98%E5%8C%96%E6%97%B6%EF%BC%8C%E5%9C%A8watch%E4%B8%AD%EF%BC%8C%E6%98%AF%E5%8F%AF%E4%BB%A5%E5%81%9A%E4%B8%80%E4%BA%9B%E5%A4%8D%E6%9D%82%E7%9A%84%E6%93%8D%E4%BD%9C%E7%9A%84%EF%BC%8C%E8%80%8Ccomputed%E4%B8%AD%E7%9A%84%E4%BE%9D%E8%B5%96%EF%BC%8C%E4%BB%85%E4%BB%85%E6%98%AF%E4%B8%80%E4%B8%AA%E5%80%BC%E4%BE%9D%E8%B5%96%E4%BA%8E%E5%8F%A6%E4%B8%80%E4%B8%AA%E5%80%BC%EF%BC%8C%E6%98%AF%E5%80%BC%E4%B8%8A%E7%9A%84%E4%BE%9D%E8%B5%96%E3%80%82