面试官问：Vue3 对比 Vue2 有哪些变化？

前言

内容混杂用法 + 原理 + 使用小心得，面试建议收藏，官问慢慢看。有变

区别

生命周期的面试变化

整体来看，变化不大，官问只是有变名字大部分需要 + on，功能上类似。面试使用上 Vue3 组合式 API 需要先引入；Vue2 选项 API 则可直接调用，官问如下所示。有变

// vue3

import { onMounted } from vue

onMounted(() => {

...

})

// 可将不同的面试逻辑拆开成多个onMounted，依然按顺序执行，官问不被覆盖

onMounted(() => {

...

})

// vue2

export default {

mounted() {

...

},有变

}

</script>

常用生命周期表格如下所示。

Vue2.x

Vue3

beforeCreate

Not needed

*

created

Not needed

*

beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeDestroy

onBeforeUnmount

destroyed

onUnmounted

Tips： setup是面试围绕beforeCreate和created生命周期钩子运行的，所以不需要显式地去定义。官问

多根节点

Vue3 支持了多根节点组件，有变也就是fragment。

Vue2中，编写页面的亿华云计算时候，我们需要去将组件包裹在<div>中，否则报错警告。

...

...

</template>

Vue3，我们可以组件包含多个根节点，可以少写一层，niceeee ！

...

...

</template>异步组件

Vue3 提供 Suspense组件，允许程序在等待异步组件时渲染兜底的内容，如 loading ，使用户体验更平滑。 使用它，需在模板中声明，并包括两个命名插槽：default和fallback。Suspense确保加载完异步内容时显示默认插槽，并将fallback插槽用作加载状态。

Loading...

</template>

真实的项目中踩过坑，若想在 setup 中调用异步请求，需在 setup 前加async关键字。这时，会受到警告async setup() is used without a suspense boundary。站群服务器

解决方案：在父页面调用当前组件外包裹一层Suspense组件。

Teleport

Vue3 提供Teleport组件可将部分DOM移动到 Vue app之外的位置。比如项目中常见的Dialog组件。

</teleport>组合式API

Vue2 是 选项式API（Option API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期函数等），导致代码的可读性变差，需要上下来回跳转文件位置。Vue3 组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起。

除了增强了代码的可读性、内聚性，组合式API 还提供了较为完美的逻辑复用性方案，服务器租用举个