在 vue 3 composition api 中，直接对 `form.ranks` 调用 `.map()` 得到的普通变量不会自动响应数组变化；需改用 `computed` 声明派生状态，才能正确追踪 `form.ranks` 的响应式更新。
当你使用 @inertiajs/inertia-vue3 的 useForm（或类似响应式表单工具）初始化表单时，form.ranks 是一个响应式数组（通常为 ref 或 reactive），但对其执行 .map() 后赋值给普通变量（如 ranks_options = form.ranks.map(...)）会立即求值并断开响应式连接——后续 form.ranks 的增删改均不会触发 ranks_options 更新。
✅ 正确做法：使用 computed 创建响应式计算属性：
import { computed } from 'vue';
// 假设 useForm 已正确引入并调用
const form = useForm({
name: null,
ranks: [],
});
function addRanks() {
form.ranks.push({ name: null, id: null });
}
// ✅ 响应式派生：自动追踪 form.ranks 变化
const ranks_options = computed(() =>
form.ranks.map(item => item.name)
);这样，每当 form.ranks 被 push、splice、pop 等方式修改时，ranks_options 会自动重新计算，DOM 中依赖它的模板（如
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要解构 form.ranks 后再操作（如 const { ranks } = form; ranks.push(...)），这可能破坏响应性（取决于 useForm 内部实现，建议始终通过 form.ranks 访问）；
- 若 ranks 中存在深层嵌套对象且需监听 name 的变更，确保 item.name 本身也是响应式（如为 ref 或 reactive 属性）；当前示例中 null 值无问题，但若后续赋值为响应式对象，computed 仍能正确追踪；
- 避免在 computed 中执行副作用（如 API 调用、DOM 操作），它仅用于声明式派生状态。
总结：Composition API 中所有依赖响应式源的派生数据，都应通过 computed 定义——这是保持响应链完整、避免“丢失响应性”的核心实践。
