Berechnete Eigenschaften werden in Produktionsbuilds nicht aktualisiert

Question

Wenn ich eine Eigenschaft namens wildcardItem 的计算属性，该属性在使用开发构建时有效，但当我运行生产构建 (mix --product habe, wird die Eigenschaft nicht mehr aktualisiert.

Ich verwende Laravel Mix, um den Code zu kompilieren.

mix.setPublicPath('../')
    .js('js/app.js', 'dist/app.js')
    .vue()
    .postCss('css/app.css', 'dist/app.css', [
        require('postcss-import'),
        require('@tailwindcss/nesting'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .options({
        manifest: false,
    });

Komponenteneinstellungen

const items = ref([]);
const query = ref('');

const wildcardItem = computed(_ => {
    console.log('Computing wildcard...');

    return {
        label: query.value,
    };
});

document.addEventListener('CustomEvent', function (event) {
    items.value = [
        ...event.detail.items,
        wildcardItem,
    ];
});

Komponentenvorlage

<template>
    <div>
        <input v-model="query" />
        <div v-for="(item, index) in items" :key="`item-${index}`">
            {{ item.label }}
        </div>
    </div>
</template>

Ich kann console.log auch nicht sehen, wenn ich mit dem Produktions-Build laufe.

Kann mir jemand erklären, warum es nicht funktioniert? :)

Answer 1

compulated() 返回一个 ref，因此您需要使用 .value 来解开 ref 的值：

document.addEventListener('CustomEvent', function (event) {
    items.value = [
        ...event.detail.items,
        //wildcardItem, ❌
        wildcardItem.value, ✅
    ];
});

演示 1

或者，您可以使用反应性转换，这不需要任何展开（不需要 .value ）。不要导入 ref 和 compulated，而是使用 $ref 和 $compulated （无需导入）：

演示 2

您看到的另一个问题是，当 wildcardItem 更改时，items 未更新。您需要重构您的解决方案，使 items 成为基于附加到自定义事件项目的 wildcardItem 的 compulated 属性：

演示 3