vue 给钩子函数注入

在 Vue 中，我们可以使用 mixin 对象来实现钩子函数的注入。Mixin 对象是一个普通的 JavaScript 对象，它可以包含任意的组件选项，包括生命周期钩子函数。通过将 mixin 对象传入 Vue.extend() 函数或在组件中使用 mixins 选项，可以将这些钩子函数注入到组件中。

下面是一个示例，在 mixin 对象中注入了 created 钩子函数：

const myMixin = {
  created() {
    console.log('Mixin created hook executed.')
  }
}

Vue.component('my-component', {
  mixins: [myMixin],
  created() {
    console.log('Component created hook executed.')
  }
})

在此示例中，当我们创建一个名为 my-component 的组件时，mixin 对象中的 created 钩子函数会被注入到组件中，同时组件自身的 created 钩子函数也会被执行。因此，控制台将输出以下内容：

Mixin created hook executed.
Component created hook executed.

需要注意的是，如果 mixin 对象和组件自身都定义了相同的钩子函数，那么它们都会被执行，但是 mixin 对象中的钩子函数会先执行。如果 mixin 对象和组件自身都修改了相同的选项，那么组件自身的选项会覆盖 mixin 对象的选项。