Vue 框架中 computed 和 watch 的使用场景及其区别

computed 和 watch 的使用场景

computed

computed 属性是一个计算属性，它可以根据其他属性的值来计算出一个新的值。computed 属性是惰性的，这意味着它只会在其依赖的属性值发生变化时才重新计算其值。这使得 computed 属性非常适合用于计算一些开销较大的值，比如格式化后的日期或复杂的对象。

watch

watch 是一个侦听器，它可以监视一个或多个属性的值的变化。当被监视的属性值发生变化时，watch 会执行指定的回调函数。watch 非常适合用于对数据变化做出响应，比如更新 UI、发送网络请求或触发其他操作。

computed 和 watch 的区别

惰性求值 vs 主动求值

computed 属性是惰性的，这意味着它只会在其依赖的属性值发生变化时才重新计算其值。watch 是主动的，这意味着它会在每次被监视的属性值发生变化时执行指定的回调函数。

依赖关系

computed 属性只能依赖其他属性的值，而 watch 可以依赖任何 JavaScript 表达式，包括函数调用和异步操作。

性能

computed 属性通常比 watch 更高效，因为 computed 属性只会在其依赖的属性值发生变化时才重新计算其值。watch 会在每次被监视的属性值发生变化时执行指定的回调函数，这可能会对性能造成影响。

什么时候用 computed？

• 当你需要计算一个开销较大的值时，比如格式化后的日期或复杂的对象。
• 当你需要在模板中使用一个计算值时。
• 当你需要对数据变化做出响应，但不需要立即执行任何操作时。

什么时候用 watch？

• 当你需要对数据变化做出立即响应时。
• 当你需要监视一个或多个属性的值的变化，并执行一些操作，比如更新 UI、发送网络请求或触发其他操作。
• 当你需要监视一个或多个属性的值的变化，并对这些值进行一些处理。

总结

computed 和 watch 是 Vue 框架中两个非常有用的特性，它们可以帮助我们轻松地响应数据的变化，并对数据变化进行处理。computed 和 watch 都可以使用函数来响应数据的变化，但是它们之间还是有一些区别的。

computed 属性是惰性的，它只会在其依赖的属性值发生变化时才重新计算其值。computed 属性非常适合用于计算一些开销较大的值，比如格式化后的日期或复杂的对象。

watch 是一个侦听器，它可以监视一个或多个属性的值的变化。当被监视的属性值发生变化时，watch 会执行指定的回调函数。watch 非常适合用于对数据变化做出响应，比如更新 UI、发送网络请求或触发其他操作。

希望这篇文章能帮助你更好地理解和使用 Vue 框架中的 computed 和 watch 特性。