v-model 在 Vue 3 的 el-transfer 中仅控制右侧目标列表的选中 key 数组，源数据不变时左右列表完全由 v-model 派生；初始化、清空、排序均通过操作该数组实现，并天然支持 el-form 表单联动。
v-model 在 Vue 3 的 el-transfer 中只控制右侧（目标）列表的选中项，它绑定的是一个 key 值数组，不是整个对象，也不是左侧数据。组件内部通过这个数组和原始 data 源自动计算出左右两列内容——没有独立维护左右列表状态，完全受控于 v-model + data。
核心逻辑：v-model 决定 targetData，其余全派生
组件源码中，targetData 是计算属性：
→ 所有 data 中 key 存在于 v-model 数组里的项，组成右侧列表；
→ 剩余项自动归入左侧列表（sourceData）。
这意味着：
- 初始化右侧有数据？直接把对应 key 写进 v-model 初始值，比如
ref([2, 5, 7]) - 想清空右侧？把 v-model 设为空数组
[] - 左侧数据变化（如过滤、搜索）？只要不改 v-model，右侧内容完全不受影响
修改右侧顺序：靠改 v-model 数组本身
默认情况下，右侧项按原始 data 顺序排列。若需自定义顺序（如上移/下移），必须开启 target-order="push"，然后直接操作 v-model 绑定的数组：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 拿到当前选中的 key（通过
@right-check-change事件） - 在 v-model 数组中查出该 key 对应的索引
- 用数组方法交换相邻元素（如
arr.splice(i, 1, ...arr.splice(i-1, 1, arr[i]))） - 注意边界：索引为 0 时不能上移，索引为
arr.length - 1时不能下移
双向绑定与表单集成
v-model 不仅是响应式绑定，还内置了表单联动能力：
立即学习“前端免费学习笔记（深入）”；
- 当 v-model 值改变时，组件会自动触发
dispatch('ElFormItem', 'el.form.change', val) - 如果穿梭框在
<el-form>内，无需额外代码，校验状态和重置逻辑天然生效 - 自定义子组件封装时，只需用
defineModel()或props + emit模拟相同行为即可保持一致性
本质就是“数组驱动视图”，不复杂但容易忽略数据源头——v-model 是开关，data 是底座，其余全是推导结果。
