Vue 基础面试题, 怎么在组件初始化时立即调用 Vue 的 watch 函数?

Step 1

Q:: 如何在组件初始化时立即调用 Vue 的 watch 函数？

A:: 在 Vue 中，watch 默认在监听的属性发生变化时触发。但如果你希望在组件初始化时就立即执行 watch 函数，可以将 immediate: true 作为 watch 选项的一部分传递。这将使 watch 函数在监听属性第一次被设置时立即执行一次。

代码示例：

 
watch: {
  someData: {
    handler(newValue, oldValue) {
      // 处理逻辑
    },
    immediate: true
  }
}
 

Step 2

Q:: Vue 中的 watch 和 computed 有什么区别？

A:: 虽然 watch 和 computed 都可以用于响应式数据的变化，但它们的应用场景不同。computed 更适合用来计算基于其他数据的值，具有缓存特性，只会在相关依赖变化时重新计算。而 watch 则适用于监听数据变化，并在变化时执行异步或开销较大的操作，比如调用 API 或手动更新 DOM。

Step 3

Q:: 什么情况下应该使用 Vue 的 watch 而不是 computed？

A:: 当你需要在数据变化时执行异步操作、发送 HTTP 请求、或者需要在数据变化时执行多个步骤的操作时，watch 是更好的选择。而 computed 更适合用于计算和返回基于其他响应式数据的值，且无需手动操作 DOM 或进行副作用处理。

Step 4

Q:: Vue 中如何优化 watch 的性能？

A:: 在 Vue 中，如果 watch 监听的数据量很大或变化频繁，可能会影响性能。你可以通过以下方式优化： 1. 使用深度监听 (``deep: true``) 仅在必要时开启。 2. 在 watch 中避免进行复杂的同步计算或频繁的 DOM 操作。 3. 使用节流或防抖技术来限制 watch 回调的触发频率。

Step 5

Q:: 如何在 Vue 3 中使用 Composition API 替代 watch？

A:: 在 Vue 3 中，Composition API 提供了 watchEffect 和 watch 两个方法来替代传统的 watch 选项。watchEffect 会在其依赖的响应式数据变化时立即执行，而 watch 依然可以监听特定的响应式变量。你可以通过使用 ref、reactive 等 API 来定义响应式数据，并使用 watch 进行监听。

代码示例：

 
import { ref, watch } from 'vue';
const someData = ref(0);
watch(someData, (newValue, oldValue) => {
  console.log('someData changed:', newValue);
});