大家好，这里是大家的林语冰。今天分享的是一篇 Vue 3 爱好者的踩坑日记，防雷防坑防 bug，辅助大家体验 Vue 3 的人体工程学和 DX（开发体验）。
免责声明
本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 10 Mistakes to Avoid When Starting with Vue 3。
Vue 3 已经稳定了一段时间了。许多代码库将其投入生产，其他人最终也必须升级。我有机会使用它并记录我的错误，您可能希望避免这些错误。
1. 诉诸 reactive 辅助声明原始值
数据声明过去很"直男"，但现在可以使用多个辅助。现在的基本规则是：
- 诉诸
reactive声明Object/Array/Map/Set - 诉诸
ref声明String/Number/Boolean
诉诸 reactive 声明原始值会被警告，并且该值不会响应化。
[Vue warn]：值不会响应化
矛盾的是，反过来却可以奏效！举个栗子，诉诸 ref 声明 Array 会在内部调用 reactive 取而代之。
2. 解构响应式数据
假设您有一个携带计数器和增加计数器的按钮的响应式对象。
一目了然且如期工作，但您可能会想利用 JS（JavaScript）解构并执行下述操作。
代码看起来一毛一样，根据我们之前的经验，应该可以奏效，但事实上，Vue 的响应性追踪是诉诸属性读写来赋能的。这意味着，我们无法赋值或解构响应式对象，因为与第一个引用的响应性连接丢失了。
这是使用 reactive 辅助的 限制 之一。
3. 对 .value 感到头大
同样，使用 ref 的怪癖之一可能很难习惯。
Ref 接受一个值并返回一个响应式对象。该值在对象内部的 .value 属性下可用。
js
const count = ref(0)
console.log(count) // { value: 0 }
console.log(count.value) // 0
count.value++
console.log(count.value) // 1但是在模板中使用 ref 时，ref 会被解包，并且不需要 .value。
不过要小心！解包能且仅能适用顶层属性。以下代码片段将生成 [object Object]：
正确使用 .value 需要时间。尽管我偶尔会忘记它，但我首先发现自己使用它的频率供过于需。
4. 事件触发
自 Vue 初始版本以来，子组件可以使用 emits 与父组件通信。您只需要添加一个自定义侦听器来侦听事件。
js
this.$emit('my-event')
现在需要诉诸 defineEmits 宏来声明 emits。
另一件要铭记于心的事情是，defineEmits 和 defineProps（用于声明 props）都无需导入。使用 script setup 时它们会自动启用。
最后，因为现在必须声明事件，所以无需使用 .native 修饰符，事实上，它已经 被删除了。
5. 声明额外选项
script setup 不支持选项式 API 方法的若干属性：
nameinheritAttrs- 插件或库所需的自定义选项
解决方案是在 script setup RFC 中定义的在同一组件中使用 2 个不同脚本。
6. 使用响应性转换
响应性转换是 Vue 3 的一项 实验性但极具争议 的功能，旨在简化 声明组件 的方式。此想法是利用编译时转换来自动解包 ref 并使 .value 作废。但现在它已作废，并将在 Vue 3.3 移除。它仍然可以作为一个包提供，但由于它不是 Vue 核心的一部分，所以最好不要在它身上浪费时间。
7. 定义异步组件
异步组件以前是通过将它们包裹在函数中来声明的。
js
const asyncModal = () => import('./Modal.vue')从 Vue 3 开始，异步组件需要诉诸 defineAsyncComponent 辅助显式定义。
js
import { defineAsyncComponent } from 'vue'
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))8. 在模板中使用多余的包装器
Vue 2 中要求组件模板有且仅有单一根元素，这有时会引入多余的包装器。
现在物是人非，因为现在支持多个根元素。
9. 使用错误的生命周期事件
所有组件生命周期事件都通过添加 on 前缀或完全改名来重命名。您可以在下图中检查所有变更。
10. 跳过文档
最后，官方文档 已面目全非，以反映新的 API，并包含了一大坨有价值的注释、指南和最佳实践。即使您是一位经验丰富的 Vue 2 工程师，阅读它也绝对能温故知新。
完结撒花
每个框架都有一个学习曲线，Vue 3 的学习曲线无疑比 Vue 2 曲折。我仍然不相信版本间的迁移工作是合理的，但组合式 API 更加清晰，并且熟能生巧后感觉毫无违和感。
如果您有任何建设性意见或个人心证要共享，请在下方群聊自由言论。并记住：我宁愿犯错，也不愿什么都不做。
友情赞助
关于其他 99 种套路，语冰确信已经发现了一种流量密码，可惜这里知识的盲区太小，写不下。
您现在收看的是前端翻译计划，学废了的小伙伴可以订阅此专栏合集，我们每天佛系投稿，欢迎持续关注前端生态。谢谢大家的点赞，掰掰~