在 vue 3 composition api 中，直接对 `form.ranks` 调用 `.map()` 会丢失响应性；需改用 `computed()` 创建依赖追踪的派生状态，确保 `ranks_options` 随 `form.ranks` 的增删或属性变更自动更新。
当你使用 @inertiajs/inertia-vue3 的 useForm（或类似响应式表单工具）定义表单时，form.ranks 是一个响应式数组（通常为 ref 或 reactive 包裹的对象），但对其直接调用非响应式方法（如 .map()）并赋值给普通变量，会导致结果脱离响应式系统。例如：
// ❌ 错误：ranks_options 是一次性快照，不响应 form.ranks 的变化 const ranks_options = form.ranks.map(value => value.name);
即使后续调用 addRanks() 向 form.ranks 推入新项，ranks_options 也不会更新——因为它未声明任何响应式依赖，Vue 无法追踪其变化。
✅ 正确做法是将其封装为 computed 计算属性：
import { computed } from 'vue';
// ✅ 正确：自动追踪 form.ranks 及其内部属性（如 value.name）
const ranks_options = computed(() =>
form.ranks.map(value => value.name)
);这样，Vue 会在 form.ranks 数组本身发生变化（如 push、pop、splice）或其子项的 name 属性被修改（前提是 value 本身也是响应式的，如 reactive({ name: null })）时，自动重新执行该函数并更新 ranks_options 的值。
react-best-practices
下载
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
立即学习“前端免费学习笔记（深入）”；
⚠️ 注意事项：
- 确保 form.ranks 中每个元素（如 { name: null, id: null }）也具备响应性。若通过 form.ranks.push({...}) 添加的是普通对象，建议显式用 reactive() 或 ref() 包裹（取决于你的 useForm 实现）；Inertia 的 useForm 默认会对嵌套对象做浅层响应式处理，但深层属性变更仍需谨慎。
- 避免在 computed 中执行副作用（如 API 调用、DOM 操作）；它应保持纯函数特性。
- 若需过滤/转换逻辑较复杂，可拆分为多个 computed 或封装为可复用的组合函数（composable）。
总结：在 Composition API 中，所有派生状态（尤其是依赖响应式源的数组映射、过滤、格式化等）都应通过 computed 声明，这是保障响应链完整性的关键实践。
