Vue 进阶面试题, 什么是 Vue 的高阶组件?请举例说明

Step 1

Q:: 什么是 Vue 的高阶组件（Higher-Order Component, HOC）？

A:: Vue 的高阶组件是一个函数，接受一个组件作为参数，然后返回一个新组件。高阶组件可以用来复用组件的逻辑，通常用于装饰模式，逻辑抽离，权限管理等场景。

Step 2

Q:: 请举例说明如何实现一个简单的 Vue 高阶组件？

A:: 假设我们要实现一个日志功能的高阶组件 withLogging，它可以包装任何组件，并在组件生命周期的某些阶段输出日志信息。

 
function withLogging(WrappedComponent) {
  return {
    mounted() {
      console.log(`Component ${WrappedComponent.name} has been mounted.`);
    },
    render(h) {
      return h(WrappedComponent, {
        on: this.$listeners,
        props: this.$props,
        attrs: this.$attrs
      });
    }
  };
}
 

这个 withLogging 函数接受一个组件并返回一个新的组件，新的组件会在 mounted 阶段输出日志信息。

Step 3

Q:: 高阶组件与 Vue 的混入 (Mixin) 有什么区别？

A:: 高阶组件与混入都是为了复用逻辑，但是它们有一些关键区别。混入是直接将逻辑注入到组件中，可能会引起命名冲突和不可预测的行为。而高阶组件通过包装的方式复用逻辑，更加清晰且不易引发冲突，同时更容易追踪和调试。

Step 4

Q:: Vue 中什么时候使用高阶组件比较合适？

A:: 在需要复用多个组件中的复杂逻辑，同时避免逻辑的重复代码时，可以使用高阶组件。它可以用于权限管理、条件渲染、性能优化等场景，特别是在需要装饰组件功能的时候，高阶组件是一个很好的选择。