Vue中如何正确向数据对象的pathStats数组添加多值并单独访问？

看起来你这里的核心问题是把数组当成对象来用了——你初始化pathStats为数组[]，但试图通过属性名（比如created、edited）来访问它的成员，这不符合数组的使用逻辑，自然会返回undefined。下面分两种场景给你解决方案：

场景1：你需要的是键值对结构（直接通过pathStats.created访问） #

如果你的需求是存储一组命名的统计数据（比如created、edited对应不同的值），那pathStats应该定义为对象，而不是数组：

Vue 2 写法 #

export default {
  data() {
    return {
      // 初始化为空对象，而不是数组
      pathStats: {}
    }
  },
  methods: {
    addStats() {
      // 方式1：直接赋值（如果是已声明的属性，Vue2能追踪到响应式）
      this.pathStats.created = '2024-05-20';
      this.pathStats.edited = '2024-05-21';

      // 方式2：如果是动态添加新属性（Vue2需要用$set确保响应式）
      this.$set(this.pathStats, 'deleted', '2024-05-22');
    }
  }
}

Vue 3 写法 #

Vue3的响应式系统对对象属性的追踪更灵活，直接赋值即可：

import { reactive } from 'vue';

export default {
  setup() {
    const pathStats = reactive({});

    const addStats = () => {
      pathStats.created = '2024-05-20';
      pathStats.edited = '2024-05-21';
      // 动态添加属性也不需要额外处理，Vue3会自动追踪
      pathStats.deleted = '2024-05-22';
    };

    return { pathStats, addStats };
  }
}

这样之后，你再用console.log(this.pathStats.created)就能拿到正确的值了。

场景2：你确实需要数组，但每个元素包含created/edited属性 #

如果你的需求是存储多条统计记录（比如多个文件的创建、编辑时间），那pathStats作为数组是合理的，但要往数组里推入对象，而不是单独的属性：

// Vue 2 写法
data() {
  return {
    pathStats: []
  }
},
methods: {
  addRecord() {
    // 推入包含属性的对象
    this.pathStats.push({
      created: '2024-05-20',
      edited: '2024-05-21',
      fileName: 'file1.txt'
    });
    // 访问时要通过数组索引+属性名
    console.log(this.pathStats[0].created); // 能拿到正确值
  }
}

为什么你之前的写法会返回undefined？ #

数组的本质是有序集合，它的成员是通过索引（0、1、2...）访问的。你虽然可以给数组添加自定义属性（比如pathStats.created = 'xxx'），但：

1. Vue的响应式系统不会追踪数组的自定义属性（无论是Vue2还是Vue3），这会导致数据更新后视图不刷新；
2. 这本身就不符合数组的设计意图，容易造成代码逻辑混乱。

所以根据你的需求选择对应的结构才是正确的做法~

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