Vue 进阶面试题, 什么是 Vue 的 provide 和 inject?
Vue 进阶面试题, 什么是 Vue 的 provide 和 inject?
QA
Step 1
Q:: 什么是 Vue 的 provide 和 inject？
A:: Vue 的 provide 和 inject 是一对用于组件间通信的 API，主要用于祖先组件和后代组件之间共享数据。provide 是在祖先组件中定义的一个方法，负责提供数据；inject 则是在后代组件中使用，用于接收祖先组件提供的数据。这种方式可以避免通过 prop 层层传递数据，也可以跨越多级组件进行数据共享。
Step 2
Q:: provide 和 inject 在 Vue3 和 Vue2 中的差异是什么？
A:: 在 Vue2 中，provide 和 inject 的实现是通过依赖注入来实现的，数据的响应性需要手动实现。而在 Vue3 中，provide 和 inject 更加强大和灵活，提供的数据可以是响应式的，并且还支持 Symbol 作为 key 来提供和注入数据，这使得数据的共享更加安全和灵活。
Step 3
Q:: 如何在 Vue 中使用 provide 和 inject？
A:: 在 Vue3 中，你可以在 setup 函数中使用 provide 和 inject。例如，在祖先组件中使用 provide('key', value) 提供数据，在后代组件中使用 const value = inject('key') 接收数据。你也可以提供多个数据，或者通过组合式 API 将 provide 和 inject 与其他逻辑一起使用。
Step 4
Q:: 使用 provide 和 inject 有什么注意事项？
A:: 首先，provide 和 inject 仅适用于建立在 Vue 组件体系内的数据传递，它们不应该被滥用，特别是在组件间没有明确的依赖关系时。此外，虽然提供的响应式数据会自动在后代组件中响应变化，但对复杂的数据结构（如对象或数组）进行深层次修改时，可能需要手动触发更新。