Vue3 与 Vue2 区别

一、Vue3 与 Vue2 区别

对于生命周期来说，整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，组合式API的Vue3 中使用生命周期钩子时需要先引入，而 Vue2 在选项API中可以直接调用生命周期钩子，如下所示。

// vue3
<script setup>     
import { onMounted } from 'vue';   // 使用前需引入生命周期钩子onMounted(() => {// ...
});// 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不会被覆盖
onMounted(() => {// ...
});
</script>// vue2
<script>     
export default {           mounted() {   // 直接调用生命周期钩子            // ...         },           }
</script> 

 常用生命周期对比

二. 多根节点 

熟悉 Vue2 的朋友应该清楚，在模板中如果使用多个根节点时会报错，如下所示。

// vue2中在template里存在多个根节点会报错
<template><header></header><main></main><footer></footer>
</template>// 只能存在一个根节点，需要用一个<div>来包裹着
<template><div><header></header><main></main><footer></footer></div>
</template>

但是，Vue3 支持多个根节点，也就是 fragment。即以下多根节点的写法是被允许的。

<template><header></header><main></main><footer></footer>
</template>

三. Composition API

Vue2 是选项API（Options API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当需要修改某个逻辑时，需要上下来回跳转文件位置。

Vue3 组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。

四.异步组件

<tempalte><suspense><template #default><List /></template><template #fallback><div>Loading...      </div></template></suspense>
</template>

在 List 组件（有可能是异步组件，也有可能是组件内部处理逻辑或查找操作过多导致加载过慢等）未加载完成前，显示 Loading...（即 fallback 插槽内容），加载完成时显示自身（即 default 插槽内容）。