DEV Community
·
Vue 组合式 API - 计算属性与侦听器
💡
原文约700字/词，阅读约需3分钟。
📝
内容提要
computed()用于创建自动更新的派生值，基于响应式数据；watch()用于观察响应式值的变化并执行相应代码。computed()返回需存储的响应式对象，而watch()作为观察者无需存储。
🎯
关键要点
- computed()用于创建基于响应式数据的派生值，自动更新。
- computed()会在依赖的数据变化时自动重新计算。
- 使用computed()可以缓存值，避免每次渲染时都执行函数。
- watch()用于观察响应式值的变化，并在变化时执行代码。
- watch()可以接收新旧值作为参数，并在值变化时触发回调函数。
- 使用reactive()时，需设置{ deep: true }以观察对象内部的变化。
- computed()适用于需要派生值的场景，而watch()适用于需要执行副作用的场景。
- computed()返回一个需要存储的响应式对象，而watch()作为观察者无需存储。
❓
延伸问答
computed()的主要功能是什么？
computed()用于创建基于响应式数据的自动更新的派生值。
watch()与computed()有什么区别？
watch()用于观察响应式值的变化并执行代码，而computed()返回一个需要存储的响应式对象。
如何使用watch()观察对象内部的变化？
使用reactive()时，需要设置{ deep: true }来观察对象内部的变化。
computed()如何提高性能？
computed()会缓存值，避免每次渲染时都执行函数，从而提高性能。
在什么情况下应该使用computed()？
当需要一个依赖于其他响应式值的派生值时，应该使用computed()。
watch()如何处理新旧值？
watch()可以接收新旧值作为参数，并在值变化时触发回调函数。
➡️
