nuxtjs 各个生命周期HOOK多次调用BUG

BUG 版本： ~2.15.3
初次使用发现如果定义多个 layout 的情况, 每个钩子都会被调用两次
如果是 server 端的钩子的话会被调用三次

client 端两次
server 端一次

测试方法

laytous/
   default.vue
   custom.vue
pages/
   test.vue

text.vue

<script>
export default {
    layout: 'custom',
    created() {
        console.log(this.$nuxt.layoutName, process.client, process.server);
    },
    fetch() {
        console.log(this.$nuxt.layoutName, process.client, process.server);
    }
};
</script>

这样可以看到 created 执行两次， fetch 执行三次
那么要规避这个问题，则

created() {
    if(this.$nuxt.layoutName)  {
        // your code
    }
}

只要判断layoutName 非空即可

# nuxtjs, vue

Alipay

Wechat

nuxtjs 各个生命周期HOOK多次调用BUG

Like this article? Support the author with

Comments

Categories

Tag Cloud

Recent

Archives

Tags

Recent

Archives

Tags

Your browser is out-of-date!