一、Vue 3 的优势

Vue 2 Options API 的缺陷：

一个功能往往需要在不同的 vue 配置项中定义属性和方法，比较分散，需求简单还好，清晰明了；但是需求复杂之后，就会多出 watch，computed，inject，provide 等配置，这个.vue 文件也会逐渐增大，且一个 methods 中可能包含 10-20 个方法，你往往分不清哪个方法对应着哪个功能。  

Vue3 中的 Composition API 就是用来解决这个问题的：

通过组合的方式，把零散在各个data，methods的代码，重新组合，一个功能的代码都放在一起维护，并且这些代码可以单独拆分成函数

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

二、创建项目 

创建一个 Vue 项目：  

npm init vue@latest

三、项目目录 

• vite.config.js

  • 项目的配置文件【基于 Vite 的配置】

• package.json

  • 项目包文件批【核心依赖想变成了 Vue3.x 和 Vite】

• main.js

  • 入口文件【createApp 函数创建应用实例】

• app.vue

  • 根组件【SFC 单文件组件 script - template - style】

  • 变化一：脚本 script 和 模板 template 顺序调整

  • 变化二：模板 template 不再要求唯一根元素

  • 变化三：脚本 script 添加 setup 标识支持组合式 API

• index.html

  • 单页入口【根据 id 为 app 的挂载点】

<!-- 加上 setup 允许在 script 中直接编写组合式 API -->
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script><template><!-- 不在要求唯一根元素 --><header><img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /><div class="wrapper"><!-- 导入的标签可以直接使用 --><HelloWorld msg="You did it!" /></div></header><main><TheWelcome /></main>
</template><!-- scoped 只在当前组件内起作用 -->
<style scoped>
header {line-height: 1.5;
}.logo {display: block;margin: 0 auto 2rem;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}
}
</style>

一  叶  知  秋，奥  妙  玄  心