本文已参与「新人创作礼」活动，一起开启掘金创作之路。

本节主要介绍下 vue2与vue3的主要区别，他们之间到底有什么区别，哪些地方做了优化改进，为什么改更新他们，vue2的 Options API 为什么vue3改成了 Composition API了，Composition API有哪些好的地方，他的优势在哪，以及vue3还有哪些新的组件，下面来说一下

1. Options API 存在的问题

• 使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改，我们会在一个vue文件中methods，computed，watch，data中等等定义属性和方法，共同处理页面逻辑，我们称这种方式为 Options API。

• 虽然条理比较清晰，但是相同的放在相同的地方，但随着组件功能的增大，关联性会大大降低，组件的阅读和理解难度会增加

• 调用使用 this，但逻辑过多时 this 会出现问题，比如指向不明等；

2. Composition API 的优势

• 我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起

• vue3 中的 Composition API 就是用来解决共同处理页面逻辑这个问题的：通过组合的方式，把零散在各个data，methods的代码，重新组合，一个功能的代码都放在一起维护，并且这些代码可以单独拆分成函数 。

-　在 vue3 Composition API 中，我们的组件代码根据逻辑功能来组织的，一个功能所定义的所有 API 会放在一起（更加的高内聚，低耦合）。这样做即使项目很大，功能很多，我们都能快速的定位到这个功能所用到的所有API，而不像 vue2 Options API 中一个功能所用到的API都是分散的，需要改动功能，到处找API的过程是很费劲的。

• 示例

import {ref, computed} from 'vue'
export default function useCounter(){
    let count = ref(1)
    function add(){
        count.value++
    }
    let double = computed(()=>count.value*2)
    return {count, double, add}
}

3. Fragment

• 在Vue2中: 组件必须有一个根标签
• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
• 好处: 减少标签层级, 减小内存占用

4. Teleport

• 什么是Teleport
  • Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>

5. Suspense

• 作用
  • 等待异步组件时渲染一些额外内容，让应用有更好的用户体验
• 使用步骤：
  • 异步引入组件

   import {defineAsyncComponent} from 'vue'
   const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
  

  • 使用Suspense包裹组件，并配置好default 与 fallback

     <template>
         <div class="app">
             <h3>我是App组件</h3>
             <Suspense>
                 <template v-slot:default>
                     <Child/>
                 </template>
                 <template v-slot:fallback>
                     <h3>加载中.....</h3>
                 </template>
             </Suspense>
         </div>
     </template>