vuejs2 - 为什么激活的生命周期钩子(Hook)在第一次访问时没有被调用

Question

我遇到一个问题，router-view 中保持事件状态的组件在首次创建时未调用其 activated 生命周期 Hook 。 created 和 mounted 生命周期钩子(Hook)被调用。第二次访问时，调用了 activated Hook 。

这个场景相当复杂，因为涉及到一些嵌套和槽的使用。

我已经尝试创建一个最小的示例，您可以在下面找到它，或者在 https://codesandbox.io/s/251k1pq9n 上找到更详细的信息.

不幸的是，它相当大，但仍然没有我无法分享的真实代码那么复杂。

更糟糕的是，我未能在我的最小示例中重现实际问题。此处，created、mounted 和 activated 生命周期 Hook 均在首次访问 SlotExample 时调用。

在我的真实代码中，只有 created 和 mounted 生命周期钩子(Hook)在第一次访问时被调用，activated 钩子(Hook)在第一次访问时被调用随后的访问。有趣的是，所有生命周期 Hook 都按预期为 SlotParent 调用。

真正的代码涉及更多的嵌套，并利用插槽来使用布局组件。

我的代码使用的是 Vue 2.5.16 和 Vue-Router 3.0.1，但在 Due 2.6.7 和 Vue-Router 3.0.2 中也无法正常工作。我也在使用 Vuetify 和 Vue-Head，但我认为这与我的问题没有任何关系。

index.js.

有没有人知道我可能做错了什么。我实际上怀疑 vue-router 中的错误当使用多个嵌套插槽和 keep-alive 但无法重现时。

索引.js

import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import Start from "./Start.vue";
import SlotExample from "./SlotExample.vue";

const routes = [
    {
        path: "/start",
       component: Start
    },
    {
        path: "/slotExample/:id",
        component: SlotExample,
        props: true
    }
];

const router = new VueRouter({ routes });

Vue.use(VueRouter);

new Vue({
    render: h => h(App),
    router,
    components: { App }
}).$mount("#app");

App.vue

<template>
    <div id="app">
        <div>
            <keep-alive><router-view/></keep-alive>
        </div>
    </div>
</template>

插槽示例.vue

<template>
    <div>
        <h1>Slot Example</h1>
        <router-link to="/start"><a>start</a></router-link>
        <router-link to="/slotExample/123">
    <a>slotExample 123</a>
  </router-link>
        <slot-parent :id="id">
            <slot-child
                slot-scope="user"
                :firstName="user.firstName"
                :lastName="user.lastName"/>
        </slot-parent>
    </div>  
</template>

<script>
    import SlotParent from "./SlotParent.vue";
    import SlotChild from "./SlotChild.vue";
    export default {
        name: "slotExample",
        components: { SlotParent, SlotChild },
        props: {
            id: {
                type: String,
                required: true
            }
        }
    };
</script>

SlotParent.vue

<template>
    <div>
        <div slot="header"><h1>SlotParent</h1></div>
        <div slot="content-area">
            <slot :firstName="firstName" :lastName="lastName" />
        </div>
    </div>
</template>

<script>
    export default {
        name: "slotParent",
        props: {
            id: {
                type: String,
                required: true
            }
        },
        computed: {
            firstName() {
                if (this.id === "123") {
                    return "John";
                } else {
                    return "Jane";
                }
            },
            lastName() {
                return "Doe";
            }
        }
    };
</script>

插槽子.vue

<template>
    <div>
        <h2>SlotChild</h2>
        <p>{{ firstName }} {{ lastName }}</p>
    </div>
</template>

<script>
    export default {
        name: "slotChild",
        props: {
            firstName: {
                type: String,
                required: true
            },
            lastName: {
                type: String,
                required: true
            }
        },
        created() {
            console.log("slotChild created");
        },
        mounted() {
            console.log("slotChild mounted");
        },
        activated() {
            console.log("slotChild activated");
        }
    };
</script>

Answer 1

我认为您需要将 SlotChild 放在 keep-alive block 中。

看看vue js doc about activated hook