DEV Community
·
Vue 组合式 API - 计算属性与侦听器
内容提要
computed()用于创建自动更新的派生值，基于响应式数据；watch()用于观察响应式值的变化并执行相应代码。computed()返回需存储的响应式对象，而watch()作为观察者无需存储。
关键要点
-
computed()用于创建基于响应式数据的派生值，自动更新。
-
computed()会在依赖的数据变化时自动重新计算。
-
使用computed()可以缓存值，避免每次渲染时都执行函数。
-
watch()用于观察响应式值的变化，并在变化时执行代码。
-
watch()可以接收新旧值作为参数，并在值变化时触发回调函数。
-
使用reactive()时，需设置{ deep: true }以观察对象内部的变化。
-
computed()适用于需要派生值的场景，而watch()适用于需要执行副作用的场景。
-
computed()返回一个需要存储的响应式对象，而watch()作为观察者无需存储。
延伸解读
computed()的优势
使用computed()可以有效地缓存计算结果，避免在每次渲染时重复执行相同的计算。这在处理复杂逻辑或大量数据时尤为重要，可以显著提高性能。
watch()的应用场景
watch()适合用于需要执行副作用的场景，例如发起网络请求或更新外部状态。了解何时使用watch()而非computed()可以帮助开发者更好地管理应用的响应式行为。
深度观察的注意事项
在使用reactive()时，如果需要观察对象内部的变化，务必设置{ deep: true }。否则，watch()将无法捕捉到嵌套属性的变化，这可能导致意外的行为。
延伸问答
computed()的主要功能是什么？
computed()用于创建基于响应式数据的自动更新的派生值。
watch()与computed()有什么区别？
watch()用于观察响应式值的变化并执行代码，而computed()返回一个需要存储的响应式对象。
如何使用watch()观察对象内部的变化？
使用reactive()时，需要设置{ deep: true }来观察对象内部的变化。
computed()如何提高性能？
computed()会缓存值，避免每次渲染时都执行函数，从而提高性能。
在什么情况下应该使用computed()？
当需要一个依赖于其他响应式值的派生值时，应该使用computed()。
watch()如何处理新旧值？
watch()可以接收新旧值作为参数，并在值变化时触发回调函数。
