Vue 3 computed & watch：掌握响应式数据，告别手动更新！

「小墨是前端」致力于分享实用前端技术、挖掘优秀的开源项目，带你探索前端的奇妙世界，共同学习进步。

在构建动态交互的 Vue 应用时，高效管理和响应数据变化至关重要。Vue 3 提供了 computed 和 watch 两种强大的特性，一个负责精准计算，一个负责敏锐感知，共同成就流畅的用户体验。

computed：数据管家，一键更新

例如在商城购物车中，商品数量和价格实时变动，如何优雅地更新总价？手动计算？No！Vue 3 的 computed 属性就像一位精明管家，负责自动计算并缓存结果，只有当依赖的数据发生变化时，才会重新计算，避免不必要的开销。

基本用法：

上面代码中，totalPrice会自动根据quantity和price的变化而更新，无需手动干预。

除了只读计算，computed 属性也支持双向绑定：

watch：变化侦测器，触发副作用

当数据变化时，除了更新视图，有时还需要执行一些副作用操作，例如发送请求、修改 DOM 元素、播放动画等，这时就轮到 watch 大显身手了。watch 就像一位警觉的哨兵，时刻监视着特定数据的变化，并在变化发生时触发相应的回调函数。

基本用法:

监听多个数据:

watchEffect：自动追踪依赖：

watchEffect无需手动指定依赖，它会自动追踪回调函数中用到的响应式数据，并在这些数据变化时重新执行回调函数：

深度监听:

如果需要监听复杂对象的属性变化，可以使用深度监听，例如监听user对象：

computed 与 watch 的选择：

computed 适用于派生新的数据，并自动缓存结果；watch 适用于执行副作用操作，或需要监听多个数据源。

熟练掌握 computed 和 watch，将助你更好地驾驭 Vue 3 的响应式系统，打造灵活、高效、可维护的应用程序。

创作不易，求点赞、求在看、求转发！你的支持是我创作的最大动力！关注小墨，带你解锁更多前端技能！