Vue中如何设置computed数组指定索引的值？

核心问题说明 #

Vue计算属性的setter仅在直接替换整个计算属性的引用时触发（比如sections.value = 新数组），而直接修改数组元素（sections[0] = 'xxx'）、调用数组方法（如push）不会触发setter——因为这些操作没有改变数组本身的引用，只是修改了数组内部的数据。另外，计算属性返回的是响应式引用，不能直接附加setIndex这类自定义方法。

解决方案一：改用本地ref配合监听props（推荐） #

这种方式更灵活，适合频繁修改数组元素的场景：

import { ref, watch } from 'vue';

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);

// 初始化本地响应式数组，深拷贝props的初始值避免直接修改props
const sections = ref([...(props.modelValue.sections || [])]);

// 监听props的sections变化，同步到本地ref
watch(
  () => props.modelValue.sections,
  (newSections) => {
    sections.value = [...(newSections || [])];
  },
  { deep: true, immediate: true }
);

// 自定义修改指定索引的方法
const setSectionIndex = (index, value) => {
  // 确保索引在有效范围内
  if (index >= 0 && index < sections.value.length) {
    sections.value[index] = value;
    // 生成新的对象emit给父组件，保证响应式更新
    emit('update:modelValue', {
      ...props.modelValue,
      sections: [...sections.value]
    });
  }
};

// 自定义添加section的方法
const addSection = (newSection) => {
  sections.value.push(newSection);
  emit('update:modelValue', {
    ...props.modelValue,
    sections: [...sections.value]
  });
};

解决方案二：坚持使用计算属性（需替换数组引用） #

如果一定要用计算属性，修改数组时必须创建新数组并赋值给计算属性，以此触发setter：

import { computed } from 'vue';

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);

const sections = computed({
  get() {
    return props.modelValue.sections || [];
  },
  set(newSections) {
    emit('update:modelValue', { ...props.modelValue, sections: newSections });
  }
});

// 修改指定索引的方法：创建新数组替换原数组
const setSectionIndex = (index, value) => {
  if (index >= 0 && index < sections.value.length) {
    const newSections = [...sections.value];
    newSections[index] = value;
    sections.value = newSections; // 这里会触发computed的setter
  }
};

// 添加section的方法
const addSection = (newSection) => {
  sections.value = [...sections.value, newSection];
};

关键注意事项 #

• 永远不要直接修改props中的数据（包括数组），Vue遵循单向数据流原则，必须通过emit将新数据传递给父组件更新。
• 无论是哪种方案，emit时都要生成新的对象/数组引用（比如用扩展运算符...），确保父组件能感知到数据变化。

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