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报表自动化
发表回复