【Vue】3-1、Vue 3 简介-CSDN博客

本文链接：https://blog.csdn.net/weixin_43551213/article/details/135985480

本文探讨了Vue3CompositionAPI如何解决Vue2OptionsAPI的分散问题，通过组合式编程方式使组件代码更清晰、高内聚。同时，介绍了如何使用Vite创建Vue3项目及新目录结构的变化，如脚本和模板顺序调整、组件导入方式和scoped样式等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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>

一叶知秋，奥妙玄心