Vue3 Composition API：计算属性绑定img src的异常问题排查

这个异常的核心原因大概率是初始状态下响应式依赖的取值不符合预期，或者计算属性的依赖追踪未正确触发，以下是具体排查和解决步骤：

1. 确认窗口宽度的初始化逻辑 #

如果width是通过resize事件监听更新的，务必在组件挂载时主动获取一次真实窗口宽度，否则初始值可能是默认值（如0），导致计算属性首次判断错误：

import { ref, onMounted, onUnmounted, computed } from 'vue';

const width = ref(window.innerWidth);
const thresholds = ref({ xl: 1200 }); // 示例阈值

onMounted(() => {
  const updateWidth = () => {
    width.value = window.innerWidth;
  };
  // 挂载时主动更新一次宽度，确保初始值正确
  updateWidth();
  window.addEventListener('resize', updateWidth);
  
  onUnmounted(() => {
    window.removeEventListener('resize', updateWidth);
  });
});

const arrowUrl = computed(() =>
  width.value > thresholds.value.xl
    ? '/img/elements/arrow.svg'
    : '/img/elements/arrow_small.svg'
);

2. 验证thresholds的响应式特性 #

确保thresholds是通过ref或reactive创建的响应式对象，否则Vue无法追踪其属性变化，计算属性不会自动更新：

// 正确的响应式声明方式
const thresholds = ref({ xl: 1200 });
// 或
const thresholds = reactive({ xl: 1200 });

如果thresholds是普通对象（未用响应式API包裹），即使后续修改xl的值，计算属性也不会重新计算。

3. 打印日志验证计算属性的执行逻辑 #

在计算属性中添加日志，明确首次执行时的判断条件和返回值，确认是否与你的断点观察一致：

const arrowUrl = computed(() => {
  console.log('当前宽度:', width.value, 'XL阈值:', thresholds.value.xl);
  const targetUrl = width.value > thresholds.value.xl
    ? '/img/elements/arrow.svg'
    : '/img/elements/arrow_small.svg';
  console.log('返回图片路径:', targetUrl);
  return targetUrl;
});

通过控制台输出可以直接定位：首次计算时是否真的返回了arrow.svg，还是断点时机有误导致的判断偏差。

4. 排除浏览器缓存干扰（可选） #

如果浏览器缓存了旧图片路径，可能导致视觉上的延迟更新，可以临时给路径添加随机参数测试：

const arrowUrl = computed(() => {
  const basePath = width.value > thresholds.value.xl
    ? '/img/elements/arrow.svg'
    : '/img/elements/arrow_small.svg';
  // 添加随机参数避免缓存
  return `${basePath}?v=${Date.now()}`;
});

内容的提问来源于stack exchange，提问作者Celanyth