从 jQuery 转到 Vue 后，我踩过的 8 个坑

写了几年 jQuery，转到 Vue 之后思维要换。下面这些坑我都真实踩过。

1. 直接操作 DOM

习惯性 $('#id').text('xx')，在 Vue 里应该用数据驱动。实在要操作 DOM，用 ref，别用选择器。

2. 数组/对象修改不触发更新

Vue 2 里 arr[0] = x 或 obj.newKey = x 不会触发视图更新，要用 Vue.set 或 this.$set。

3. v-if 和 v-show 混用

频繁切换用 v-show，条件很少变用 v-if。v-if 会销毁重建组件，里面有请求的话会重复发。

4. v-for 不写 key

不写 key 或写 index 当 key，列表增删时会复用错节点，出现输入框内容错位。

5. 在 created 里操作 DOM

created 时 DOM 还没渲染，要等 mounted。

6. 事件总线乱用

组件多了之后 eventBus 会变成灾难，不知道谁发了谁收了。用 Vuex 或 provide/inject。

7. 忘记取消定时器/监听

beforeDestroy 里要清 setInterval、removeEventListener、取消未完成请求。

8. computed 里做副作用

computed 应该是纯函数，别在里面发请求或改数据，用 watch。

说到底，从命令式转声明式，核心就是「别直接碰 DOM，让数据去驱动」。