Vue3 面试题, Vue 3 中的 watch 和 watchEffect 有什么区别?如何选择使用它们?

Step 1

Q:: Vue 3 中的 watch 和 watchEffect 有什么区别？如何选择使用它们？

A:: 在 Vue 3 中，watch 和 watchEffect 都用于监听响应式数据的变化，但它们有一些区别。watch 需要显式地声明要监听的响应式数据，可以监听单个或多个数据源的变化，并提供旧值和新值。watchEffect 则不需要显式声明监听的数据源，它会自动追踪在其作用范围内使用的所有响应式数据，适用于不需要旧值的新值比较的场景。选择使用哪一个取决于具体需求：如果需要对特定数据进行详细的变化处理，使用 watch；如果只是简单地响应数据变化，不需要复杂的比较，使用 watchEffect。

Step 2

Q:: Vue 3 中的 Composition API 和 Options API 有什么区别？

A:: Composition API 和 Options API 是 Vue 3 中两种不同的代码组织方式。Options API 是 Vue 2 中的传统方式，通过配置对象来定义组件的选项（如 data, methods, computed 等）。Composition API 则是 Vue 3 引入的新方式，通过函数和组合逻辑来组织代码，使得代码更加灵活和可重用。Composition API 更适合复杂应用的开发，因为它可以更好地组织和复用代码逻辑，而 Options API 对于简单组件来说更直观易懂。

Step 3

Q:: Vue 3 中的 reactive 和 ref 有什么区别？

A:: 在 Vue 3 中，reactive 和 ref 都是用来创建响应式数据的方法。reactive 用于将一个对象转换为响应式对象，适用于需要响应式管理的复杂数据结构。ref 用于创建一个包含单一值的响应式引用，适用于简单的单一值或基本类型。两者都可以实现数据的响应式更新，但使用场景和API略有不同。

Step 4

Q:: Vue 3 中如何使用 Teleport？

A:: Teleport 是 Vue 3 中的新特性，用于将组件的模板渲染到 DOM 的指定位置之外。使用 Teleport 时，需要在模板中使用 <teleport> 标签，并指定 to 属性为目标元素的选择器。例如：<teleport to="#modal">...</teleport>。Teleport 适用于模态框、提示框等需要脱离当前组件层次结构的场景。

Step 5

Q:: 如何在 Vue 3 中使用 Provide/Inject 实现依赖注入？

A:: Provide/Inject 是 Vue 3 提供的依赖注入机制，用于在组件树中共享数据。通过在祖先组件中使用 provide 选项来提供数据，在后代组件中使用 inject 选项来注入数据。使用时，在祖先组件中调用 provide 方法提供数据：provide('key', value)，在后代组件中调用 inject 方法获取数据：const value = inject('key')。这种机制适用于跨层级的状态共享，如主题配置、用户信息等。

Step 1

Q:: Vue 3 中的 watch 和 watchEffect 有什么区别？如何选择使用它们？

A:: 在 Vue 3 中，watch 和 watchEffect 都用于监听响应式数据的变化，但它们的使用场景和工作方式有所不同。

1. watch： - watch 用于监听特定的响应式数据或计算属性。当目标值发生变化时，它会触发一个回调函数。 - watch 是惰性评估的，也就是说它只有在被监听的数据发生变化时才会执行回调。 - 常用于监听特定的状态变化，如路由参数的改变，或者表单输入的变化等。

2. watchEffect： - watchEffect 是立即执行的，并且会自动追踪其中所有响应式数据的依赖关系。当任何依赖发生变化时，它会重新运行整个回调函数。 - 它适合用于没有明确依赖关系的场景，比如需要自动跟踪和响应多个响应式状态的变化。

如何选择使用它们？

- 当你需要精确控制监听哪个响应式数据并对其变化做出响应时，选择 watch。 - 当你需要响应多个依赖关系，或者不确定会有哪些响应式数据时，选择 watchEffect，它会自动追踪依赖关系。

Step 2

Q:: 什么时候应该使用 watch，而不是 watchEffect？

A:: 使用 watch 时，你通常需要处理某个特定数据的变化，并且你不希望一开始就执行回调函数，而是仅在特定的条件下触发。例如，监听路由参数的变化，或者某个用户输入字段的值。这时候，watch 能够让你精确控制要监听的数据，并在变化时执行特定的逻辑。

Step 3

Q:: watch 和 watchEffect 是否有性能差异？如果有，如何优化？

A:: 在大多数情况下，watchEffect 可能会带来更多的性能开销，尤其是在依赖关系较多且变化频繁的情况下。因为它会在每次依赖变化时重新执行整个函数。如果这个函数比较复杂，可能会对性能产生影响。

优化方式： - 在可能的情况下，使用 watch 来代替 watchEffect，以减少不必要的依赖追踪。 - 如果必须使用 watchEffect，尽量保持其回调函数简洁，避免在回调中执行复杂的逻辑或涉及大量计算。