盯着终端红字报错，光标在命令行和浏览器间来回跳了十几次，你是不是也想过把电脑合上装没看见？学习vue的朋友大多从hello world开始，但一到真实vue项目调试报错就抓狂。今天这篇笔记不扯虚的，直接聊我替你踩过的三个坑。

先别急着翻文档，这几个报错我替你排查了

　　很多初学vue的人一报错就去找官方示例，其实90%的报错跟框架无关，是你自己手滑。比如组件名大小写没对上——模板里写my-component，注册时写成MyComponent，Vue 2里能跑，Vue 3直接抛警告。还有props传值类型不匹配：父组件传个字符串，子组件用Number验证，报错信息绕半天。不如先检查三件事：模板引用路径对不对、组件名首字母大小写、data是不是函数。

　　别急。

　　再比如v-model绑定对象属性时，直接修改对象本身不会触发更新，必须用Vue.set或展开运算符。这些细节文档里都有，但人遇到报错就慌。后台上线前收到过一条留言：数据改了页面没变，查了两小时才发现忘了用this.$forceUpdate()。其实根本不用，学会用watch监听深层对象才是正解。

组件通信搞混？试试这四种写法，别死记背

　　学习vue的第二道坎就是父子组件传值。props down, events up——道理懂，一写就乱。有的人用$emit传个回调函数，结果子组件里调了两次，父组件里跑了两个方法。其实组件通信搞混时，先想清楚业务场景：如果只是父传子，用props；子传父，用$emit；兄弟之间或者跨多层，试试vuex或provide/inject。不要一上来就用事件总线，后期维护头疼。

　　有的朋友可能遇到过：父组件用v-for渲染子组件，每个子组件需要独立状态，却把索引当key，导致组件复用混乱。这时候把key换成唯一ID，渲染性能卡顿也会缓解。记住：不要用index作key，除非列表静态且不排序。

　　另外，多使用计算属性代替方法。计算属性有缓存，方法每次渲染都执行。如果你发现渲染时页面卡顿，先检查模板里是不是用了太多方法调用。把复杂逻辑抽到计算属性里，页面秒变流畅。

　　优化：

　　还有一个坑是异步更新。用this.$nextTick()确保DOM更新后再操作。比如你改了数据，紧接着用document.querySelector获取DOM，拿到的还是旧值。加上nextTick回调，问题解决。

　　结束。

　　参数调不对就去扒官网《渲染函数》那节，那玩意儿最准。