Vue JS/JavaScript向数组push对象值异常、显示Observer问题

1. 数组没有追加实际响应值的原因 #

核心是两个代码错误：

• 上下文this指向丢失，且_this变量未定义：你在setTimeout、forEach里都用了function(){}普通函数写法，普通函数的this是运行时动态绑定的，默认指向全局window对象，不是当前Vue组件实例。同时你直接使用_this却没有在作用域顶层提前声明赋值（比如const _this = this），导致push操作根本没有修改组件内定义的projectFieldOptions，你控制台看到的内容要么是全局下的同名脏数据，要么是之前错误操作残留的内容。
• 如果你看到数组项的value、text固定显示为字符串item，大概率是调试时误给item加了单引号，把变量写成了字符串字面量'item'，自然不会读取循环里的实际值。

2. 控制台显示Observer标识的原因 #

这是Vue 2响应式系统的正常表现，不是bug。Vue 2初始化组件时，会对data里定义的数组、对象通过Object.defineProperty做递归属性劫持，给所有被监听的数据加上Observer标记，用来在数据变更时自动触发视图更新，不需要额外处理。

修正后的代码 #

把所有普通函数改成箭头函数即可继承外层的组件实例this，不需要额外定义_this变量：

http.post("projects/import/", this.importData)
.then((response) => {
    const res = response.data;
    console.log(res);
    if (res.status == "pending") {
        // 箭头函数继承外层this，指向当前组件实例
        setTimeout(() => {
            this.callHttp();
            this.loadDone = true;
        }, 5000);
    } else {
        this.loadDone = false;
        // 箭头函数不会修改this指向，可直接调用组件属性
        res.forEach((item) => {
            this.projectFieldOptions.push({ value: item, text: item });
        });
        // 更简洁的写法：直接用map生成新数组替换，不需要循环push
        // this.projectFieldOptions = res.map(item => ({value: item, text: item}))
        console.log(this.projectFieldOptions);
    }
})
.catch((error) => {
    console.log(error);
});
this.countHTTP++;

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