Vue 进阶面试题, Vue 的 watch 和计算属性有什么区别?

Step 1

Q:: Vue 的 watch 和计算属性有什么区别？

A:: Vue 中的 watch 和计算属性 (computed) 都用于监听和响应数据变化，但它们有不同的用途和实现方式。计算属性是基于响应式依赖进行缓存的属性，只有当相关依赖发生变化时才会重新计算。因此，计算属性通常用于复杂的逻辑计算，以减少不必要的重新渲染。而 watch 是更通用的观察者，允许我们在数据变化时执行异步操作或复杂的逻辑。watch 适合用于监听数据变化并执行副作用操作，例如发起 API 请求或手动更新 DOM。

Step 2

Q:: 为什么计算属性有缓存，而方法没有？

A:: 计算属性基于其依赖的数据进行缓存，只有当依赖的数据变化时，Vue 才会重新计算该属性。这是因为计算属性通常用于需要频繁访问的复杂计算，缓存能够提高性能。而方法每次调用时都会重新执行，不会缓存计算结果。因为方法适用于不依赖于其他数据或不需要缓存的情况。

Step 3

Q:: watch 和 computed 的使用场景分别是什么？

A:: computed 适合用于纯计算逻辑，且依赖的数据变化不频繁的场景，例如在模板中动态计算属性。watch 适合用于需要执行副作用的场景，如数据变化后需要发起 API 请求、手动操作 DOM 或者执行其他异步操作。

Step 4

Q:: 如何在 Vue 中优化性能？

A:: Vue 中的性能优化可以从多方面进行，包括合理使用计算属性、避免不必要的 watch、使用 v-if 和 v-show 控制组件渲染、懒加载路由和组件、使用 Vuex 进行状态管理、在复杂列表渲染中使用 v-for 的 key 属性、避免在 template 中执行复杂计算等。