数组排序功能异常求助：'arraysorted'未定义错误排查

错误原因分析 #

• 全局声明的const Array = []覆盖了原生Array构造函数，同时和组件data里的Array命名冲突，导致变量引用混乱
• mounted是Vue的生命周期钩子，必须定义为函数，你写成了对象，导致排序逻辑根本不会执行
• 在ArraySort方法里直接用arraysorted和Array，没有通过this访问组件实例的data属性，所以报未定义错误
• Array.sort()会直接修改原数组，如果需要保留原始数组，应该先复制一份再排序

修正后的代码 #

<template>
  <div>
    {{ arraysorted }}
  </div>
</template>

<script>
// 去掉全局的Array定义，避免覆盖原生构造函数
export default {
  data: () => ({
    // 改名避免和原生Array冲突
    originalArray: [1, 24, 23, 56, 76, 5, 468, 97, 65, 90, 23, 53, 23],
    arraysorted: [],
  }),
  // mounted改为函数，钩子触发时调用排序方法
  mounted() {
    this.ArraySort();
  },
  methods: {
    // 将排序方法放到methods选项中，符合Vue规范
    ArraySort() {
      // 先复制原数组再排序，避免修改原始数据
      this.arraysorted = [...this.originalArray].sort((a, b) => b - a);
    },
  },
};
</script>

额外说明 #

• 组件内的自定义方法统一放在methods中，是Vue的标准写法
• 用扩展运算符[...this.originalArray]或this.originalArray.slice()创建数组副本，能避免原数组被排序操作修改
• 箭头函数(a, b) => b - a是原匿名回调函数的简化写法，功能完全一致

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