Vue项目中console.log输出对象变量为何显示为null？

安全阿岳

2026-8-15

问题分析与解决方案

核心问题1：对象引用导致数组元素被同步修改

你往items数组里推入的是itemToBeProcessed的内存引用，而非独立副本。当你在addItem中重置原对象的属性时，数组里的元素因为指向同一块内存地址，会跟着变成重置后的状态。

浏览器控制台打印对象时是动态读取的——展开对象时会拉取最新的内存值，所以你看到的是重置后的结果；而单独打印id这类原始值（字符串/数字），会保留打印瞬间的快照，因此显示正确。

核心问题2：空数组判断逻辑错误

item.buyers != [] 永远返回true，因为JavaScript中两个数组是不同的引用对象，哪怕都是空数组，也不会被判定为相等。正确的判断方式是检查数组长度：item.buyers.length !== 0。

修复后的代码

修改`addItem`方法，创建对象副本推入数组：

addItem() {
  // 创建对象浅拷贝，切断引用关联
  const newItem = { ...this.itemToBeProcessed };
  this.items.push(newItem);
  // 重置原对象
  this.itemToBeProcessed.id = null;
  this.itemToBeProcessed.name = "";
  this.itemToBeProcessed.price = null;
  this.itemToBeProcessed.buyers = [];
  this.itemToBeProcessed.amountPurchased = null;
},

修复`checkInput`中的数组判断：

async checkInput() {
  let item = this.itemToBeProcessed;
  // 修正空数组判断逻辑
  if (item.name !== "" &&
      item.id !== null &&
      item.price !== null &&
      item.amountPurchased !== null &&
      item.buyers.length !== 0) {
    // 若想查看打印瞬间的对象快照，可通过JSON序列化生成副本
    console.log(this.itemToBeProcessed.id);
    console.log(JSON.parse(JSON.stringify(this.itemToBeProcessed)));
    console.log(this.itemToBeProcessed.id);
    this.addItem();
  } else {
    alert("Not all Fields are set correctly!");
  }
}