17370845950

在 vue 3 composition api 中，使用 `ref()` 创建的响应式变量不能直接重新赋值（如 `variant = ref(newval)`），而必须通过 `variant.value = newval` 更新其内部值，否则响应式连接将丢失，模板和逻辑中无法感知变化。

你遇到的问题根源在于这行代码：

variant = Vue.ref(results.data.variants[0]);

它错误地用一个新的 ref 实例覆盖了原始 variant 变量的引用，导致：

• 原始 ref 对象被丢弃；
• setup() 返回的 variant 仍指向旧的、未更新的 ref；
• 模板中绑定的 {{ variant }} 或 variant.value 不会响应新值。

✅ 正确做法是：复用原始 ref，仅更新其 .value：

axios.get('/products/{{product.handle}}.js')
  .then((results) => {
    variant.value = results.data.variants[0]; // ✅ 正确：修改响应式值
    console.log('Updated variant:', variant.value);
  })
  .catch(err => console.error('Failed to fetch variants:', err));

⚠️ 注意事项：

• ref() 返回的是一个带 .value 属性的响应式对象，不是普通变量；
• 直接赋值 variant = ... 会破坏响应式关联（相当于把 const variant 重新指向另一个内存地址）；
• 在 setup() 中返回 variant（而非 variant.value），模板中才能正确解包（如 {{ variant.id }} 自动读取 variant.value.id）；
• 若需在 axios 外部访问最新值，始终通过 variant.value 读取。

? 补充建议（提升健壮性）：

• 添加加载状态与错误处理：

  let variant = Vue.ref(null);
  let isLoading = Vue.ref(true);
  
  axios.get('/products/{{product.handle}}.js')
    .then(res => {
      variant.value = res.data.variants?.[0] || null;
    })
    .catch(err => {
      console.warn('Variant load failed:', err);
      variant.value = null;
    })
    .finally(() => isLoading.value = false);

掌握 ref.value 的赋值语义，是避免 Vue 3 响应式“失效”最常见也最关键的一步。