计算属性未在生产版本中更新

Question

我有一个名为 wildcardItem 的计算属性，它在使用开发版本时可以正常工作，但是当我运行生产版本 (mix --production) 时，属性不再更新

我正在使用 Laravel Mix 来编译代码。

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,
    });

组件设置

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,
    ];
});

组件模板

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

当运行生产构建时，我也没有看到我的 console.log。

有人可以指导我为什么它不起作用吗？ :)

Answer 1

computed() returns a ref，因此您需要使用 .value 解包 ref 的值：

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

demo 1

或者，您可以使用 reactivity transform，它不需要任何展开（不需要 .value）。不要导入 ref 和 computed，而是使用 $ref 和 $computed（不需要导入）：

<script setup>
let items = $ref([])
let query = $ref('')

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

  return {
    label: query,
  }
})

document.addEventListener('CustomEvent', function (event) {
  items = [
    ...event.detail.items,
    wildcardItem,
  ]
})
</script>

demo 2

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

<script setup>
import { ref, computed } from 'vue'

const customEventItems = ref([])
const query = ref('')

const wildcardItem = computed(_ => {})

const items = computed(() => [...customEventItems.value, wildcardItem.value])

document.addEventListener('CustomEvent', function (event) {
  customEventItems.value = [...event.detail.items]
})
</script>

demo 3

计算属性未在生产版本中更新

Computed property not updating in production build

vue.js

laravel-mix

vuejs3

组件设置

组件模板

计算 属性 未在生产版本中更新

Computed property not updating in production build

vue.js

laravel-mix

vuejs3

组件设置

组件模板

计算属性未在生产版本中更新