Vue 基础面试题, Vue 中 computed 和 watch 的区别是什么?
Vue 基础面试题, Vue 中 computed 和 watch 的区别是什么?
QA
Step 1
Q:: Vue 中 computed 和 watch 的区别是什么？
A:: computed 和 watch 都用于监听数据变化，但它们在使用场景和机制上有所不同。computed 是计算属性，它依赖于其他数据源，当依赖的数据源发生变化时，computed 会重新计算并缓存结果，只有当依赖项改变时才会重新计算，因此它更适合用于处理复杂的逻辑和昂贵的计算操作。watch 是一个更通用的观察者，它监听特定数据的变化，并在数据变化时执行回调函数。watch 更适合用于异步操作或在数据变化时需要执行的副作用，比如 API 请求或手动 DOM 操作。
Step 2
Q:: 在什么场景下应该使用 computed 而不是 watch？
A:: 当你需要基于现有数据计算出一个新的数据，并且希望结果是缓存的，那么应该使用 computed。computed 会自动跟踪其依赖项，并且只有当依赖项发生变化时才会重新计算，这使得它在需要高效的性能和简单的代码结构时特别有用。
Step 3
Q:: 在 Vue 中，什么时候需要使用 watch 而不是 computed？
A:: 当你需要在数据变化时执行某些异步操作或副作用操作，如 API 请求、手动 DOM 操作、更新多个不相关的数据时，应该使用 watch。watch 提供了更多的灵活性，允许你精确地控制在数据变化时触发的逻辑。
Step 4
Q:: 在 computed 中如何实现 getter 和 setter？
A:: 在 Vue 的 computed 选项中，可以为计算属性定义 getter 和 setter。getter 是默认的行为，它返回计算后的结果；而 setter 允许你在设置计算属性的值时，执行某些逻辑操作。例如，当用户修改计算属性时，你可以通过 setter 更新其他相关数据。