Vue2 Composition API中computed返回值不符问题求助

以下是几个可能的问题点及对应解决办法：

• 变量未声明导致的潜在问题：你的displayLine没有用const/let声明，虽然在setup中不会直接报错，但会变成全局变量，规范上必须补充声明，避免后续意外冲突：

  const displayLine = computed(() => props.hasLine && props.id === props.selectedItems[0].id);
  

• selectedItems为空的边界情况：如果组件初始化时props.selectedItems是空数组，selectedItems[0]会是undefined，此时props.id === undefined会返回false，导致computed首次计算结果为false。而你直接打印表达式时，可能selectedItems已经加载完成有数据了，所以结果为true。如果后续computed没有自动更新，说明父组件传递的selectedItems不是响应式数据——必须确保它是用ref或reactive创建的，不能是普通数组/对象。

• 用可选链避免错误判断：建议给selectedItems[0].id加上可选链，防止数组为空或元素不存在时出现意外的false结果：

  const displayLine = computed(() => props.hasLine && props.id === props.selectedItems?.[0]?.id);
  

• 打印时机的差异：你直接打印表达式和displayLine.value的时机可能不一致。比如setup执行时selectedItems还未加载完成，computed算出false，之后数据加载完成你再打印表达式得到true，这时候可以通过监听确认displayLine是否已更新：

  watch(displayLine, (newVal) => {
    console.log('displayLine更新后的值:', newVal);
  });
  

另外，检查props的定义，确保selectedItems有默认空数组，避免未定义的情况：

props: {
  hasLine: Boolean,
  id: [String, Number],
  selectedItems: {
    type: Array,
    default: () => []
  }
}

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