第三方插件组件不调用 mixin 定义的钩子函数

Question

我将 Vue 与 Vuetify 插件一起使用。

我正在使用 mixin 全局扩展 Vue 组件：

Vue.mixin({
    mounted() {
        console.log('Component mounted');
    }
});

我在上面看到了我自己的所有组件的日志，但没有看到 Vuetify 的 v-container 组件。

奇怪的是，当我像这样检查这个组件的选项时：

Vue.options.components['v-container'].options.mounted

我看到我的 mixin 定义的 mounted 函数被添加到钩子数组中。

创建 fiddle 后，我发现它确实适用于所有其他 Vuetify 组件。

From the docs:

Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components.

我是不是漏掉了什么？

Answer 1

问题特定于正在使用的组件，v-container. It is functional component并且功能组件不能有生命周期方法，因此将忽略在 mixin 中定义的方法。

由于 the documentation 描述了功能组件，

It doesn’t manage any state, watch any state passed to it, and it has no lifecycle methods. Really, it’s only a function with some props.

Hook functions defined by mixin not called for third-party plugin component