__ob__:观察者而不是我的对象数组(JSON.parse(JSON.stringfy(obj))NOT WORKIN

Question

我需要按字母顺序输入文件，当我将文件从一个数组传递到另一个数组时，顺序会混淆。以下是获取文件的方法：

updatePreviews() {
if (this.plan.gallery == null || this.plan.gallery.length == 0) {
this.plan.gallery = [];
}
if (this.files?.length == 0) {
this.planImages = this.oldImages.filter((o) =>
this.planImages.map((o) => o.name).includes(o.name)
);
}
this.files.forEach((file) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.addEventListener("load", () => {
if (
!this.planImages
.map((g) => g.name)
.includes(file.name)
) {
this.planImages.push({
name: file.name,
type: this.viewTypes[0],
url: fileReader.result,
description: "",
});
}
});
});
}

现在看看当我登录this.files时会发生什么订单很好(第417行)

但是当我记录这个.planImages(我从vue调用它)这就是发生的事情它们被包装到一个观察者中，并且顺序与文件数组不同。这是我调用This.planImages的vue代码，它可以很好地显示

<v-row v-for="(image, index) in this.planImages" :key="index">
<v-text-field
label="Name"
class="ma-4"
v-model="image.name"
readonly
full-width
></v-text-field>
<v-combobox
class="ma-4 mt-10"
label="View Type"
v-model="image.type"
:items="viewTypes"
></v-combobox>
<v-icon class="pt-4 pr-4" @click="deleteImage(index)"
>mdi-delete</v-icon
>
</v-row>

现在。。。我认为这是因为文件名有一些特殊的字符，比如"；()"；，但我不能应用任何排序方法，因为我不能访问任何内容，因为文件嵌套在观察者中。

我已经处理这个问题有一段时间了，下面是我尝试过的一些事情和结果：

我看到的最常见的解决方案是

const testJSON = JSON.parse(JSON.stringify(this.planImages));
console.log(testJSON);

这只会给我一个空数组返回

唯一对我有用的是：

this.planImages.__ob__ = new Object({});

这会返回给我如您所见，它会返回一个包含文件的数组(仍然混淆)，但它会打印此错误：未捕获类型错误：ob.observeArray不是函数

我想不出解决这个问题的方法，如果有人能告诉我为什么我不能找到这一切的根源，我会非常感激

Answer 1

__ob__是Vue反应性系统使用的内部属性，不应手动修改。

this.planImages的元素顺序不同，因为它的数组元素是在FileReader的load事件上推送的，该事件根据文件大小在不同的时间发生。在this.planImages中看到的顺序可能是从最小文件到最大文件。

要保留数组顺序，请将加载的文件插入到原始索引处的新数组中：

updatePreviews() {
⋮
this.planImages = [];         
this.files.forEach((file, index) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.addEventListener("load", () => {
⋮                   
this.planImages[index] = {
name: file.name,
type: this.viewTypes[0],
url: fileReader.result,
description: "",
}
});
});
}