每日一篇——23秋招VUE面经（5）

⭐说说vue注入器

注入器（Injector）是一种机制，用于在组件树中向下传递数据或共享实例，使得组件可以通过配置的方式访问到所需的依赖对象。

注入器的配置通过在父组件中使用 provide 选项来进行设置，而子组件可以使用 inject 选项来注入所需的依赖。

例：

// 父组件提供依赖对象
const ParentComponent = {
  provide: {
    theme: 'dark', // 提供一个基本数据类型的依赖
    apiService: new ApiService() // 提供一个实例依赖
  },
  // ...
};

// 子组件注入依赖对象
const ChildComponent = {
  inject: ['theme', 'apiService'], // 注入 theme 和 apiService
  created() {
    console.log(this.theme); // 访问父组件提供的 theme
    this.apiService.getData(); // 使用父组件提供的 apiService
  },
  // ...
};

在上述例子中，父组件通过 provide 选项提供了两个依赖对象：theme 和 apiService。其中，theme 是一个基本数据类型的依赖，而 apiService 是一个实例依赖。

子组件通过 inject 选项注入了这两个依赖对象，并在 created 生命周期钩子函数中使用这些依赖。通过注入器的机制，子组件可以方便地访问并使用父组件提供的依赖对象。

需要注意的是，注入器是一个向下传递数据的机制，只能在父组件和其子组件之间进行传递。子组件可以通过 inject 选项指定需要注入的依赖，但是这些依赖只会在上级组件中查找，如果没有找到则会返回默认值或者 undefined。同时，注入器是通过组件实例的引用来完成的，因此在组件树的不同位置会产生不同的实例。

⭐vue插件的作用

添加全局功能：插件可以在 Vue 实例上添加全局方法或属性，使其在整个应用中可用。例如，通过插件可以添加一个全局的 $http 方法，用于发起 AJAX 请求。这样，在任何组件中都可以直接使用 $http 方法进行数据请求。
注册全局组件：插件可以注册全局组件，使得这些组件在任何地方都可以使用。这对于需要在多个组件中重复使用的组件非常有用，可以避免在每个组件中单独导入和注册。
注册全局指令：插件可以注册全局指令，使得这些指令在整个应用中都可用。全局指令可以用于操纵 DOM 元素、监听事件、修改样式等操作。
注册全局过滤器：插件可以注册全局过滤器，使得这些过滤器在整个应用中都可用。全局过滤器可以对数据进行格式化、处理和转换，方便在模板中使用。
添加实例方法：插件可以向 Vue.prototype 上添加实例方法，使得这些方法在每个 Vue 实例中都可用。这样，在组件中可以直接通过 this 访问这些方法，方便在组件中共享和调用。
添加混入（Mixin）：插件可以添加全局混入对象，将其混入到组件的选项中。通过混入，可以在多个组件中共享相同的逻辑、方法和生命周期钩子函数。

⭐vue插件的定义与注册

vue插件的实现应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

插件的注册通过Vue.use()的方式进行注册（安装），第一个参数为插件的名字，第二个参数是可选择的配置项

Vue.use(你的插件,{ /* ... */} )

注意的是：

注册插件的时候，需要在调用 new Vue() 启动应用之前完成

Vue.use会自动阻止多次注册相同插件，只会注册一次