在 vue 3 组合式 api 中，使用 `ref()` 创建的响应式变量必须通过 `.value` 属性赋值才能触发响应式更新；直接重新赋值 `variant = ref(...)` 会丢失响应性并覆盖原有引用。
你遇到的问题非常典型：在 axios.get() 的异步回调中，执行了 variant = Vue.ref(results.data.variants[0])，这实际上创建了一个全新的 ref 对象，并将其赋值给局部变量 variant，而 setup 函数返回的 variant（即最初 Vue.ref('ealjapd')）并未被修改——它仍指向原始 ref，其 .value 也未改变。因此模板或后续逻辑中访问的仍是旧值。
✅ 正确做法是：始终通过 .value 修改已声明 ref 的内容，而非重新赋值 ref 变量本身。
以下是修复后的代码（关键修改已标注）：
<script>
if (document.querySelector('#add-to-cart-form')) {
const app = Vue.createApp({
delimiters: ['${', '}'],
setup() {
// ✅ 正确：声明一个 ref，并保留其引用
const variant = Vue.ref('ealjapd'); // 注意：推荐用 const 声明（ref 本身不重赋值）
axios.get('/products/{{product.handle}}.js')
.then((results) => {
// ✅ 正确：更新 ref 的 .value，保持响应性
variant.value = results.data.variants[0];
console.log('Updated variant:', variant.value); // 现在能正确输出新值
})
.catch(err => console.error('Failed to fetch variants:', err));
const addToCart = (event) => {
event.preventDefault();
const data = { quantity: 1, id: variant.value?.id }; // 示例：安全访问 variant.id
axios.post('/cart/add.js', data)
.then(response => console.log('Added to cart:', response))
.catch(error => console.error('Add to cart failed:', error));
};
return {
variant, // ✅ 返回的是响应式 ref，模板中可直接用 {{ variant.id }} 或 v-model="variant.title"
};
},
}).mount('#add-to-cart-form');
}
</script>? 关键要点总结：
立即学习“前端免费学习笔记（深入）”；
- ref() 返回的是一个响应式对象，其内部值存储在 .value 属性中；
- 模板中使用 {{ variant }} 时，Vue 自动解包 .value；但在 JS 逻辑中（如 axios.then），必须显式写 variant.value = ...；
- 不要写 variant = ref(...) —— 这会切断与原始 ref 的联系，导致响应式失效；
- 异步操作中更新 ref 是完全安全的，Vue 会自动触发依赖该 ref 的模板或计算属性更新；
- 建议在 axios.catch() 中添加错误处理，避免静默失败；
- 若 variants[0] 可能不存在，请增加空值判断（如 results.data.variants?.[0]）以提升健壮性。
掌握 ref 的“引用不变、值可变”原则，是写出可靠 Vue 3 响应式逻辑的基础。
