Vue 3 合成 API 在有更改时不会自动重新加载

Question

我正在上一节关于价值掌握的课。还有一种奇怪的行为。当我在App.vue中更改某些内容时，它会自动重新加载并显示我的更改。但是当我在组件文件中更改某些内容时，它不会自动重新加载。我只是遵循如何设置一个vue 3应用程序的文档

应用程序。Vue

<script setup>
import ProductDisplay from '@/Components/ProductDisplay.vue'
import { ref } from 'vue'
const cart = ref(0)
const premium = ref(true)
</script>
<template>
<div class="nav-bar"></div>
<div class="cart">{{ cart }}</div>
<ProductDisplay :premium="premium" />
</template>

组件/ProductDisplay.vue

<script setup>
import { ref, computed } from "vue";
import socksGreen from "@/assets/images/socks_green.jpeg";
import socksBlue from "@/assets/images/socks_blue.jpeg";
const props = defineProps({
premium: Boolean,
});
const details = ref(["50% cotton", "30% wool", "20% polyster"]);
const variants = ref([
{ id: 2234, color: "green", image: socksGreen, quantity: 50 },
{ id: 2235, color: "blue", image: socksBlue, quantity: 0 },
]);
const inStock = computed(() => {
return variants.value[selectedVariants.value].quantity > 0;
});
const selectedVariants = ref(0);
const cart = ref(0);
const onClick = () => {
cart.value += 1;
};
const image = computed(() => {
return variants.value[selectedVariants.value].image;
});
const updateVariant = (index) => {
selectedVariants.value = index;
};
const shipping = computed(() => {
if (props.premium) {
return "Frees"
} else {
return "Out of Stock";
}
});
</script>
<template>
<div class="product-display">
<div class="product-container">
<div class="product-image">
<img :src="image" alt="" />
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>
<p>{{ shipping }}</p>
<ul>
<li v-for="detail in details">{{ detail }}</li>
</ul>
<div
class="color-circle"
v-for="(variant, i) in variants"
:style="{ backgroundColor: variant.color }"
@mouseover="updateVariant(i)"
></div>
<button
:class="{ disabledButton: !inStock }"
class="button"
@click="onClick"
:disabled="!inStock"
>
Add to Cart
</button>
</div>
</div>
</div>
</template>

Answer 1

我已经解决了。把'components'改成'components'