共计 3349 个字符，预计需要花费 9 分钟才能阅读完成。
Vue3 目前曾经趋于稳定，不少代码库都曾经开始应用它，很多我的项目将来也必然要迁徙至 Vue3。本文记录我在应用 Vue3 时遇到的一些问题，心愿能为其余开发者提供帮忙。
1. 应用 reactive 封装根底数据类型
传统开发模式中，数据申明很简略。然而在 Vue 中有多个响应式变量申明形式，整体的应用规定如下：
应用 reactive 来封装 Object，Array，Map，Set 数据类型；
应用 ref 封装 String，Number，Boolean 类型。
如果应用 reactive 来封装根底数据类型，会产生正告，同时封装的值不会成为响应式对象。
<script setup>
import {reactive} from "vue";
const count = reactive(0);
</script>
然而，能够应用 ref 来封装 Object、Array 等数据类型，外部会调用 reactive。
2. 解构 reactive 对象
上面代码中，count 封装成了 reactive 对象，点击按钮时，count 会自增。
<template>
Counter: {{state.count}}
<button @click="add">Increase</button>
</template>
<script>
import {reactive} from "vue";
export default {setup() {const state = reactive({ count: 0});
function add() {state.count++;}
return {
state,
add,
};
},
};
</script>如果须要应用 ES6 构造赋值对 state 进行构造，须要应用如下的代码：
<template>
<div>Counter: {{count}}</div>
<button @click="add">Increase</button>
</template>
<script>
import {reactive} from "vue";
export default {setup() {const state = reactive({ count: 0});
function add() {state.count++;}
return {
...state,
add,
};
},
};
</script>构造复制实现之后，点击按钮，成果如下：
代码看起来比拟类似，而且依据以前的体现，逻辑是能够失常执行的。但事实上，Vue 的响应式追踪通过属性获取，这意味着咱们不能去解构响应式对象，会导致援用连贯失落。这是响应式代理的限度之一。
3. 应用.value 造成的困惑
Ref 承受一个值并返回一个响应式对象，该值只有在外部对象.value 属性下可用。
const count = ref(0)
console.log(count) // {value: 0}
console.log(count.value) // 0
count.value++
console.log(count.value) // 1然而 ref 如果利用在 template 中，不须要对 ref 进行解包，也就是不须要应用.vue。
<script setup>
import {ref} from 'vue'
const count = ref(0)
function increment() {count.value++}
</script>
<template>
<button @click="increment">
{{count}} // 不须要调用.value
</button>
</template>须要留神的是，解包只作用于一级属性，下边的代码会返回 [object Object]
<script setup>
import {ref} from 'vue'
const object = {foo: ref(1) }
</script>
<template>
{{object.foo + 1}} // [object Object]
</template>正确应用.value 须要工夫，初学者偶然会遗记它。在应用时，要留神只在适合的场景下应用它。
4. Emitted 事件
从 Vue 公布以来，子组件能够通过 emits 与父组件通信，只须要增加一个自定义的监听器来监听事件即可。
this.$emit('my-event')<my-component @my-event="doSomething" />Vue3 中，须要应用编译器宏 defineEmits 来申明 emits。
const emit = defineEmits(['my-event'])
emit('my-event')
</script>在 setup 语法糖下，defineEmits 和 defineProps 会被主动引入。其它状况下，须要被动引入。
<script setup>
const props = defineProps({foo: String})
const emit = defineEmits(['change', 'delete'])
// setup code
</script>最初，因为 Vue3 中，事件必须申明，因而再须要应用.native 修饰符，该修饰符已被移除。
5. 申明组件选项
setup 不反对如下组件选项申明：
- name
- inheritAttrs
- customOptions
如果须要持续应用这些属性，能够申明多个 script 脚本，如下所示：
<script>
export default {
name: 'CustomName',
inheritAttrs: false,
customOptions: {}}
</script>
<script setup>
// script setup logic
</script>
6. 应用 Reactivity Transform
Reactivity Transform 是 Vue3 中一个预览属性，有肯定的争议性，默认是禁用的。它次要用来简化组件的申明形式。这个想法是利用编译时转换来主动解包 ref，从而防止应用.value。从 Vue3.3 中曾经删除该性能，作为一个扩大包提供。因为它不是 Vue 的外围局部，且目前危险还是比拟多，倡议先不要在此方面投入太多事件。感兴趣能够参考文章：Reactivity Transform
7. 定义异步组件
异步组件以前是通过将它们蕴含在办法中来申明的。
const asyncModal = () => import('./Modal.vue')Vue3 中须要应用 defineAsyncComponent 来申明异步组件。
import {defineAsyncComponent} from 'vue'
const asyncModal = defineAsyncComponent(()
=> import('./Modal.vue'))8. template 中应用不必要的包装元素
<!-- Layout.vue -->
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>Vue3 中反对多个根元素，不再须要应用外层 div 元素包裹。
<template>
<header>...</header>
<main v-bind="$attrs">...</main>
<footer>...</footer>
</template>
9. 生命周期函数
所有组件生命周期函数都通过增加 on 前缀或齐全更名实现，下图具体列出了具体的变动：
10. 产品文档
官网对文档曾经做了更新，补充更新了 API，并蕴含很多有价值的正文、指南和最佳实际。即便你当初应用的是 Vue2，通过浏览新的文档也会学到一些新常识。
总结
每个框架都有学习曲线，Vue3 绝对 Vue2 更加平缓，在框架切换之间也会有肯定的学习老本。但 Vue3 组合式 API 绝对 Vue2 选项式 API 的确更加简洁易用。如果您在应用过程中有什么疑难，也欢送留言交换。
本文翻译自文章：
https://fadamakis.com/10-mistakes-to-avoid-when-starting-with…
扩大链接：
Spring Boot 框架下实现 Excel 服务端导入导出
我的项目实战：在线报价洽购零碎（React +SpreadJS+Echarts）
React + Springboot + Quartz，从 0 实现 Excel 报表自动化
