【文末赠书】Vue3 用法 + 原理 + 使用小 tip 总结

本文特别福利，赠送JS新书，详情查看文末～

希望本篇文章能帮你加深对 Vue 的理解，能信誓旦旦地说自己熟练Vue2/3。

内容混杂用法 原理 使用小心得，建议收藏，慢慢看。

区别

生命周期的变化

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

代码语言：javascript复制

// vue3
<script setup>     
import { onMounted } from 'vue'

onMounted(() => {
  ...
})
// 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不被覆盖
onMounted(() => {
  ...
})
</script>

// vue2
<script>     
   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>中，否则报错警告。

代码语言：javascript复制

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

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

代码语言：javascript复制

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

异步组件

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

代码语言：javascript复制

<tempalte>
   <suspense>
     <template #default>
       <todo-list />
     </template>
     <template #fallback>
       <div>
         Loading...
       </div>
     </template>
   </suspense>
</template>

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

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

Teleport

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

代码语言：javascript复制

<button @click="dialogVisible = true">点击</button>
<teleport to="body">
   <div class="dialog" v-if="dialogVisible">
   </div>
</teleport>

组合式API

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

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