Vue3【二】Vue3的一些新增特性

Vue3 作为目前比较火的一个框架，无论是在项目开发中还是在面试中，用到的都挺多。本篇文章就介绍下 Vue3 的一些基础难点以及与 Vue2 的一些区别。

1、生命周期

整体来看，变化不大，只是名字大部分需要 + on，功能上类似。

使用上Vue3组合式API需要先引入，

Vue2选项API则可以直接调用。如下代码所示：

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

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

// vue2
<script>     
   export default {         
      mounted() {             
        ...         
      },           
   }
</script> 

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

Vue2	Vue3
beforeCreate	Not needed
created	Not needed
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdate
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

注意：

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

2、多根节点

Vue3 支持了多根节点组件，也就是 fragment。
Vue2 中，编写页面的时候，我们需要去将组件包裹在 <div> 中，否则会报错警告。

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

在 Vue3 中，我们可以组件包含多个根节点，可以少写一层。

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

3、异步组件

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

<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 组件。

4、Teleport

类似于 component 和 keep-alive，teleport 同样是 Vue 的内建组件。

可以将部分DOM移动到 Vue app 之外的位置，比如项目中常见的 Dialog

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

逻辑上而言，<div> 这个容器，仍然可以与这个组价内的方法进行交互等等，但是它会被渲染到 DOM 结构的其他地方。在上面的代码中，是在 body 元素内，可以通过页面源代码查看。

5、组合式API

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

Vue3 组合式API（Composition API） 则很好的解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性。

6、响应式

Vue2 的响应式原理基础是 Object.defineProperty

Vue3 响应式原理基础是 Proxy

1. Object.defineProperty

基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象。

Vue3为什么会抛弃它呢? 是因为它有一定的缺陷。

主要原因：无法监听对象或数组新增、删除的元素。

Vue2 方案：针对常用的数组原型方法 push、pop、shift、unshift、splice、sort、reverse 进行了 hack 处理。提供 Vue.set 监听对象/数组新增属性。对象的新增/删除响应，还可以 new 个新对象，新增则合并新属性和就对象；删除则将删除属性后的对象深拷贝给新对象。

注意: Object.defineProperty 是可以监听数组已有元素的，但 Vue2 没有提供的原因是 性能 问题。这点是尤大大在 GitHub 回答的。

2.Proxy

Proxy 是 ES6新特性，通过第2个参数 handler 拦截目标对象的行为。相较于 Object.defineProperty 提供语言全范围的响应能力，消除了局限性，但在兼容性上放弃了IE11及以下。

• 对象/数组的新增、删除
• 监测 .length 修改
• Map、Set、WeakMap、WeakSet 的支持

基本用法：创建对象的代理，从而实现基本操作的拦截和自定义操作。