Vue 3 响应式的五个陷阱

一、ref 在模板里自动解包，在 JS 里不会

const count = ref(0)
console.log(count + 1)       // 得到 [object Object]1
console.log(count.value + 1) // 正确

二、解构 reactive 会丢响应式

const state = reactive({ a: 1 })
const { a } = state          // a 只是普通数字，失去响应式
const { a } = toRefs(state)  // 正确

三、watch 默认不深度监听

对象属性变化不会触发，需要 { deep: true }，或者直接监听具体属性的 getter。

四、v-for 里的 index 当 key

列表中间插入元素时会导致大面积复用错位，务必用稳定的业务 id。

五、props 是只读的

直接改 props 在开发模式会告警，生产模式静默失效。要改就 emit 给父级，或用 defineModel。

前四条都能被 ESLint 规则覆盖，建议直接开 eslint-plugin-vue 的 recommended 规则集。