Vue 中响应式变量 ref 的值更新必须通过 .value 属性赋值

碧海醫心 2025-12-29 00:00:00 次阅读

在 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);