为什么我的计算方法同时在服务器端和客户端运行？

Question

我正在用Nuxt和Vue.js制作通用应用程序，我注意到我的按钮有一些奇怪的行为，它在页面加载后改变了类，并且由于它具有过渡功能，所以变得很烦人。

我使用计算方法设置按钮的类。因此，我尝试将console.log放入计算的方法中，然后看到它同时调用了服务器端和客户端？这怎么可能？我需要做些什么才能使该方法仅称为服务器端吗？

<template>
    <a :href="link" :class="themeClass">
        <slot />
    </a>
</template>

<script>
export default {
    props: { 
        link:{
            type:String,
            default: '',
        },
        theme:
        {
            type:String,
            default: 'primary',
            validator: (value) => ['secondary', 'tertiary'].includes(value),
        },
        inverted:{
            type:Boolean,
            default: false,
        },
    },
    computed:{
        themeClass: function()
        {
            console.log("set style");
            let invertedStyle = this.inverted ? '-inverted' : '';
            return 'butt ' + this.theme + invertedStyle;
        }
    }
}
</script>

<style lang="scss" scoped>
.butt{
    box-sizing: border-box;  
    cursor: pointer;
    display: block;
    text-align: center;
    width: 170px;
    height: 40px;
    line-height: 40px;
    transition: 0.2s;
}

.primary{
    border: 2px solid $transparant;
    background-color: $primary-color;
    color: $tertiary-color;
}

.primary:hover{
    border: 2px solid $primary-color;
    @include alphaBackground();
}

.primary-inverted{
    border: 2px solid $primary-color;
    color: $primary-color;
    @include alphaBackground();
}

.primary-inverted:hover{
    border: 2px solid $transparant;
    background-color: $primary-color;
    color: $tertiary-color;
}

.secondary{
    border: 2px solid $transparant;
    background-color: $secondary-color;
    color: $tertiary-color;
}

.secondary:hover{
    border: 2px solid $secondary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.secondary-inverted{
    border: 2px solid $secondary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.secondary-inverted:hover{
    border: 2px solid $transparant;
    background-color: $secondary-color;
    color: $tertiary-color;
}

.tertiary{
    border: 2px solid $transparant;
    background-color: $tertiary-color;
    color: $primary-color;
}

.tertiary:hover{
    border: 2px solid $tertiary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.tertiary-inverted{
    border: 2px solid $tertiary-color;
    color: $tertiary-color;
    @include alphaBackground();
}

.tertiary-inverted:hover{
    border: 2px solid $transparant;
    background-color: $tertiary-color;
    color: $primary-color;
}
</style>

Answer 1

我从Nuxt不和谐中得到以下答案