嘿，老铁，今天聊聊Vue开发里那些你可Neng不小心踩到的坑。别担心，我不讲大板凳，直接说吧。

说说props和emit。你会不会在父组件里直接改子组件的props？那可真是个大坑。Vue规定props是只读的，直接改它就像在给别人家门贴标签——不靠谱。

哈哈，想想kan，你把子组件当成自己写的模块，然后随便改属性，那样子后面谁来维护？

正确Zuo法：父传props给子；子用emit把变化告诉父。这样双向绑定就不会乱套。

Ru果你想让两个兄弟级组件互相交谈，那就用事件总线或者geng现代点的Pinia、Vuex。

有些人会这么写：

  
  提交

然后在save里直接访问this.$refs.childForm.data。这么干虽然Neng跑，但耦合太高。以后要改子组件内部结构，一顿狂乱。

不对不对，应该用v-model或emit模式，让数据从父流向子，再由子发事件回父。

v-model背后其实是prop + emit组合。你Ke以自定义prop叫value，然后在内部用this.$emit。这才是Vue官方推荐的方法。

别把v-model当成魔法，只Neng用在input、select等原生元素上。自定义组件必须手动实现。

Vue的数据响应式是靠Object.definePropertyZuo的，老版本不Neng监听到属性新增或删除。所以千万记得：

#1: 初始化对象时把所有需要响应的数据dou提前声明好。

#2: 想添加新属性，用Vue.set；删除也要Vue.delete。否则geng新不了。

#3: 对数组，要使用push、splice等带索引的方法，而不是直接赋值index = value，因为那样会失去追踪。

记住这个小细节，否则页面一闪而过kan不到变化。哈哈，那些“神奇”的bug往往dou来自这里。

hen多人把watch当作万Neng工具，用来处理任何计算或副作用。但computedgeng适合纯粹派生数据，它自动缓存并且只有依赖变化才重新计算。而watch则geng像事件监听器，适合异步请求、日志记录之类的副作用场景。

Ru果你误把computed写成了watch，会导致频繁触发，还可Neng造成内存泄漏。要是不确定，就先试着用computed，再根据需求切换。

Eager loading 是常见错误之一：在created钩子里Zuo大量网络请求或复杂运算，这会拖慢页面初次渲染。建议把耗时操作放到mounted或者asyncData里让页面先渲染好骨架再拉数据。

还有一个坑：beforeDestroy里忘记清理定时器、事件监听器。这种遗留资源会导致内存泄漏，也会让调试变得怪异——比如点击同一个按钮多次会出现多次弹窗或者重复请求。记得总是在beforeUnmount里取消所有订阅和定时器！

MIXIN 真的hen方便，但Ru果跟Composition API一起混着用，就容易出现命名冲突和生命周期调用顺序混乱的问题。不建议混着写，Zui好选一种风格坚持到底。Ru果你刚接触 Vue 3，一定要掌握 Composition API 的基本概念：setup、ref、reactive 等，并且尽量避免使用options API里的data/props/filters等老方法，这样代码才干净利落。

TEMPLATE 写错了hen容易被忽略。例如忘了闭合标签、拼写错误或缺少冒号导致绑定失效：

"{{}}" 在模板里不是合法语法，要么使用v-bind：class="{ active }" 或者简写为:class="{ active }"。这种小失误导致样式根本没生效，kan起来页面啥也没变，你只Neng坐在那里抓头~

"this" 在普通方法中指向实例，但在箭头函数里就不是了。所以Ru果你写了下面这种：

methods:{
  clickHandler:  => {
    console.log; // ❌
  }
}

"this.title" 在箭头函数中指向全局window，不是我们想要的对象！所以一定要记住普通函数才Neng保持正确上下文，Ru果必须使用箭头，就手动绑定this或者改成普通函数吧！

#1: console.warn / console.error 用来快速定位问题，不要忘记关掉生产环境里的debug信息，否则用户kan到堆栈信息可真够尴尬呀！

#2: 使用 Vue.config.errorHandler 捕获全局错误，然后统一处理日志上传或展示友好的提示框，让用户体验geng佳。

#3: 开启 devtools 并利用性Neng面板观察每个组件渲染时间，发现卡顿点就Ke以及时优化啦！

#4: Ru果遇到“Cannot read property of undefined”之类报错，Ke以先打印相关变量是否存在再决定是否给默认值或加 null 检查符号 ?. 。

“我觉得现在hen多人dou想把SPAZuo成PWA，可是SEO还是个难题。” — 老友

TIPS：确保服务器端渲染或者预渲染静态内容，再加上meta标签与Open Graph，以提升搜索引擎抓取效率。不过这块内容超长，我这边先留个伏笔，下次再深入探讨吧~

Babel 把ES6+转换为兼容旧浏览器代码时有时会因为配置错误导致某些语法被错误地转译，从而引起运行时报错。例如Ru果你用了 optional chaining ，但 Babel 配置没有开启对应插件，就会抛 SyntaxError。不管是 Babel 或 Vite，dou务必确认 presets 和 plugins 配置完整。

NPM scripts 写得太短也会让调试变得困难，例如： npm run dev 只是跑 dev server，却没有加入 source maps 或者开启 HMR，这样热geng新失败就麻烦了。

Makes sure you add --mode development 或者 --mode production 明确标识环境，否则 webpack 会默认为 production，引入压缩导致调试报错。

Svelte 风格 VS Vue 风格 快速对比

Svelte 编译期优化 -> geng轻量化； Vue 响应式系统 -> geng强大生态； 两者各有千秋，你挑哪个取决于项目需求和团队熟悉度哦~