16.钩子事件hookEvent与插件。

1.hookEvent 是 Vue 的自定义事件结合生命周期钩子实现的一种从组件外部为组件注入额外生命周期方法的功能。

• 1-1.使用：当实例注册了hook:开头的事件后，会在生命周期钩子函数调用时触发对应的hook事件，例如hook:created、hook:mounted等

• 1-2.实现原理：<comp @hook:lifecycleMethod=“method” />

  • ①处理组件自定义事件的时候（vm.$on) 如果发现组件有 hook:xx 格式的事件（xx 为 Vue 的生命周期函数），则将 vm._hasHookEvent 置为 true，表示该组件有 Hook Event。
  • ②在组件生命周期方法被触发的时候，内部会通过 callHook 方法来执行这些生命周期函数，在生命周期函数执行之后，如果发现 vm._hasHookEvent 为 true，则表示当前组件有 Hook Event，通过 vm.$emit(‘hook:xx’) 触发 Hook Event 的执行。

• 1-3.场景：第三方的Vue组件el-select，我想从外部注入 mounted 生命周期函数。

<el-select ref="select" @hook:mounted="callback"></el-select>
methods: {
  callback() {
    console.log("select组件加载完毕");
  },
},

2.插件用于增强Vue。

• 2-1.本质：包含 install 方法的一个对象，install 的第一个参数是 Vue，第二个以后的参数是插件使用者传递的数据。
• 2-2.定义插件：

对象.install = function (Vue, options) {
  // 1.添加全局过滤器
  Vue.filter(....)
  // 2.添加全局指令
  Vue.directive(....)
  // 3.配置全局混入(合)
  Vue.mixin(....)
  // 4.添加实例方法
  Vue.prototype.$myMethod = function () {...}
  Vue.prototype.$myProperty = xxxx
}

• 2-3.使用插件：Vue.use(对象, 参数…)

import ElementUI from 'element-ui';
Vue.use(ElementUI);