Vue 3 的介绍与安装

时间：2024-10-24 07:42:23

1 Vue 3基本介绍

1.1 Vue 3的新特性

Vue 3是一个流行的开源JavaScript框架，主要用于构建用户界面和单页面应用。其主要新特性如下：

  1. 性能提升：Vue 3通过重写虚拟DOM、优化Diff算法、静态提升、事件监听缓存等手段，显著提升了应用的渲染和更新速度。此外，更小的打包大小也减少了应用的加载时间和带宽消耗。
  2. 更好的TypeScript支持：Vue 3在核心库和官方插件中提供了完整的TypeScript类型声明，使得开发者在开发过程中能够获得更好的代码提示和类型检查支持，提升了代码质量和开发效率。
  3. 全新的组合式API：组合式API是Vue 3的重要新特性之一，它提供了一种更灵活、可组合的组件组织方式。开发者可以根据逻辑功能来组织代码，提高了代码的可读性和可维护性。
  4. 新的内置组件：Vue 3引入了一些新的内置组件，如Fragment组件允许组件模板不再需要一个根标签，提高了组件模板的灵活性；Teleport组件能够将组件内部的部分模板传送到指定的DOM节点，方便处理特殊的布局需求；Suspense组件优化了异步组件的加载体验。
  5. 响应式系统的重写：Vue 3的响应式系统是基于ES6的Proxy特性构建的，使得Vue能够更高效地追踪数据的变化，并在数据发生变化时自动更新DOM。

1.2 与Vue 2的区别

  1. 构建方式：Vue 3使用monorepo架构，使得项目更容易管理和维护。（详细请参考1.3 Vue 3的monorepo架构）
  2. API变化：Vue 3引入了全新的组合式API，替代了Vue 2中的选项式API。组合式API提供了更灵活的代码组织方式，方便逻辑复用。（详细请参考1.4 Vue 3使用组合式API的优势）
  3. 性能优化：除了重写虚拟DOM外，Vue 3还通过其他技术手段提升了性能，包括更快的渲染速度和更小的打包大小。
  4. TypeScript支持：由于Vue 3在内部使用了TypeScript，因此为开发者提供了更好的TypeScript支持。

1.3 Vue 3的monorepo架构

Vue 3使用的monorepo架构是一种现代化的代码管理方式，它允许开发者在一个单一的代码仓库（repo）中管理多个模块或包（package）。

1.3.1 Monorepo架构概述

  1. 定义：Monorepo，即“单个仓库”（Single Repository），是一种将多个项目的代码存储在同一个仓库中的做法。

  2. 优势：

    • 代码重用：由于所有项目代码都集中在同一个仓库中，因此很容易抽离出各个项目共用的业务组件或工具，并在代码内引用。
    • 依赖管理：项目之间的引用路径内化在同一个仓库之中，便于追踪某个项目的代码修改后会影响到其他哪些项目。同时，可以使用如lerna等工具进行版本依赖管理和版本号自动升级。
    • 统一构建和测试：使用统一的构建配置和流程，减少了配置和维护的工作量。此外，可以在整个Monorepo中执行统一的测试流程，确保所有项目的质量和稳定性。
    • 便于协作和开发：在一个代码仓库中，更容易浏览、搜索和理解整个项目的代码，便于团队成员之间的协作。同时，Monorepo还可以促进跨项目的合作和知识共享，提高团队的整体效率和协同能力。

  3. 劣势：

    • 学习成本：对于新人来说，可能需要花费更多精力来理清各个代码仓库之间的相互逻辑。
    • 团队协作和权限管理：在Monorepo中，团队成员需要共享同一个代码仓库，并对所有模块具有相同的权限级别，这可能会导致一些团队成员对整个项目的代码和资源具有过多的访问权限，增加了潜在的安全风险。
    • 代码耦合：一个模块的更改可能会对其他模块产生意外的影响，增加了代码耦合性，并可能导致意外的副作用。

1.3.2 Vue 3中的Monorepo架构实践

  1. 项目结构：

    • Vue 3的源码通过Monorepo的形式来管理，其核心为packages文件夹。
    • packages内存放着功能独立的各种依赖，包括reactivity（响应式系统）、runtime-core（与平台无关的运行时核心）、runtime-dom（针对浏览器的运行时）、compiler-core（与平台无关的编译器核心）等多个模块。

  2. 依赖管理：

    • 在一个仓库中管理所有依赖，避免了版本冲突和重复安装。
    • 通过使用yarn等包管理工具，可以方便地安装和管理依赖。

  3. 代码共享和复用：

    • Vue 3中的各个模块之间可以相互引用和调用，实现了代码的高度共享和复用。
    • 这有助于减少重复开发，提高开发效率。

  4. 构建和测试：

    • Vue 3使用统一的构建配置和流程，对各个模块进行构建和测试。
    • 这确保了所有模块的质量和稳定性，并简化了构建和测试的过程。

  5. 团队协作：

    • 在Monorepo架构下，团队成员可以更容易地浏览、搜索和理解整个项目的代码。
    • 这有助于促进团队成员之间的协作和知识共享，提高团队的整体效率和协同能力。

1.3.3 Vue 3 Monorepo架构的启示

  1. 模块化设计：将大型项目拆分成多个小模块，每个模块都有自己的功能和职责。这有助于降低项目的复杂度，提高代码的可维护性和可扩展性。
  2. 代码重用：通过Monorepo架构，可以方便地抽离和复用代码，减少重复开发。这有助于提高开发效率，降低开发成本。
  3. 统一管理和测试：使用统一的构建配置和流程对各个模块进行管理和测试，可以确保项目的质量和稳定性。同时，这也简化了构建和测试的过程，提高了开发效率。

综上所述，Vue 3使用的Monorepo架构是一种高效的代码管理方式，它有助于降低项目的复杂度、提高代码的可维护性和可扩展性、促进团队协作和知识共享。然而，也需要注意其可能带来的学习成本、团队协作和权限管理等方面的挑战。

1.4 Vue 3使用组合式API的优势

Vue 3引入了全新的组合式API（Composition API），这一变化为开发者提供了更灵活、更强大的方式来构建Vue组件的逻辑。以下是对Vue 3组合式API与Vue 2选项式API（Options API）的详细对比和介绍：

1.4.1 Vue 2选项式API

在Vue 2中，选项式API是构建组件的主要方式。开发者需要在Vue组件的data、methods、computed、watch等选项中定义组件的状态、方法、计算属性和侦听器。这种方式对于小型组件来说非常直观和简单，但随着组件功能的增加，代码可能会变得难以组织和复用。

1.4.2 Vue 3组合式API

Vue 3的组合式API旨在解决大型组件中逻辑难以组织和复用的问题。它允许开发者将组件的逻辑分割成更小的函数（或称为“组合函数”），这些函数可以根据需要被引入和重用。以下是组合式API的一些关键特性：

  1. 响应式状态：使用ref和reactive函数创建响应式数据。当这些数据发生变化时，Vue会自动更新相关的DOM。
  2. 计算属性：使用computed函数创建计算属性，这些属性是基于其他响应式数据计算得出的。计算属性会缓存结果，只有在依赖的数据发生变化时才会重新计算。
  3. 侦听器：使用watch函数来侦听响应式数据的变化，并在数据变化时执行回调函数。
  4. 生命周期钩子：Vue 3提供了与选项式API类似的生命周期钩子函数，但它们是作为函数导入的，而不是作为组件选项定义的。
  5. 提供/注入：使用provide和inject函数在组件树中传递数据。这允许父组件向其后代组件提供数据，而无需通过props逐层传递。
  6. 依赖注入：组合式API还提供了更高级的依赖注入机制，允许跨组件共享逻辑。
  7. 组合函数：开发者可以创建自己的组合函数来封装可重用的逻辑。这些函数可以接收响应式数据作为参数，并返回新的响应式数据或执行其他操作。

1.4.3 组合式API的优势

  1. 更清晰的代码组织结构：组合式API将代码逻辑分离到单一的功能组件中，使得组成部分更加清晰，可重复使用性更强。
  2. 更灵活的代码复用：通过组合函数，开发者可以轻松地复用和组合逻辑，减少了代码的重复。
  3. 更好的TypeScript支持：组合式API对于TypeScript的支持更好，可以帮助开发人员对代码的类型、参数、输入输出以及状态进行更严格的定义和处理。
  4. 更易于编写自动化测试：组合式API非常利于编写自动化测试的代码，能够方便地进行模拟数据注入和断言结果的策略。

1.4.4 示例

以下是一个使用组合式API创建简单计数器组件的示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return {
      count,
      increment,
    };
  },
};
</script>

在这个示例中，setup函数是组合式API的入口点。我们使用ref函数创建了一个响应式数据count，并定义了一个increment函数来递增count的值。最后，我们通过返回一个对象来暴露这些响应式数据和函数，以便在模板中使用。

综上所述，Vue 3的组合式API为开发者提供了更灵活、更强大的方式来构建Vue组件的逻辑。它特别适用于大型、复杂的组件，以及需要共享和重用逻辑的场景。

1.5 Vue 3的创建与使用

  1. 创建Vue 3项目：可以使用Vue CLI或Vite等工具来创建Vue 3项目。在创建过程中，可以选择所需的模板和配置。
  2. 使用组合式API：在Vue 3中，可以使用组合式API来创建和管理组件。组合式API的入口是setup函数，它允许在组件实例被创建和初始化之后，但在渲染发生之前进行逻辑处理。
  3. 响应式数据：Vue 3提供了ref和reactive两个函数来创建响应式数据。ref用于定义基本类型的响应式数据，而reactive用于定义对象类型的响应式数据。
  4. 生命周期钩子：在Vue 3中，可以使用生命周期钩子来执行组件生命周期中的不同阶段的任务。例如，onMounted钩子会在组件挂载完成后被调用。
  5. 自定义指令与过滤器：Vue 3中自定义指令的API发生了变化，需要使用created和beforeUnmount等钩子替代Vue 2中的bind和unbind等钩子。此外，Vue 3已经移除了过滤器功能，需要使用计算属性或方法来替代。

1.6 Vue 3的优势

  1. 高效性：通过重写虚拟DOM和响应式系统等技术手段，Vue 3提供了更高的渲染和更新速度以及更小的打包大小。
  2. 灵活性：全新的组合式API和更灵活的代码组织方式使得Vue 3能够轻松应对复杂的应用场景。
  3. 可维护性：更好的TypeScript支持和清晰的代码结构使得Vue 3的项目更易于维护和扩展。
  4. 丰富的组件库：Vue 3拥有丰富的组件库和生态系统资源，如Element Plus、Vant等，为开发者提供了丰富的选择。

综上所述，Vue 3是一个功能强大且易于使用的JavaScript框架，它带来了许多新特性和改进，使得开发者能够更高效地构建用户界面和单页面应用。

2 从零搭建一个最基础的 Vue3 框架

2.1 使用 Vue CLI 创建

使用 Vue CLI 创建一个 Vue 3 的基础框架（脚手架程序）非常简单。以下是详细步骤：

安装 Vue CLI

首先，需要全局安装 Vue CLI。如果还没有安装 Node.js 和 npm（Node 包管理器），则需要先安装它们。然后，在终端或命令提示符中运行以下命令来安装 Vue CLI：

npm install -g @vue/cli

或者，如果使用的是 Yarn，可以运行：

yarn global add @vue/cli

创建 Vue 3 项目

安装完 Vue CLI 后，可以使用 vue create 命令来创建一个新的 Vue 项目。在创建项目时，Vue CLI 会提示选择一些配置选项。为了确保使用的是 Vue 3，需要手动选择一个预设或手动选择功能。

运行以下命令来创建项目：

vue create my-vue3-project

将 my-vue3-project 替换为想要的项目名称。

选择 Vue 版本

在命令运行后，Vue CLI 会提示选择一个预设或手动选择功能。如果想要快速开始并确保使用的是 Vue 3，可以选择 Manually select features（手动选择功能）选项。

在后续的配置步骤中，会看到一个关于 Vue 版本的提示。确保选择 Vue 3。

在这里插入图片描述

完成项目创建

按照提示完成剩余的配置步骤。可以选择是否需要 Babel、TypeScript、Progressive Web App (PWA) 支持、Router、Vuex 等。完成配置后，Vue CLI 会开始下载并安装所需的依赖项。

运行项目

安装完成后，可以进入项目目录并运行项目：

cd my-vue3-project
npm run serve

或者，如果使用的是 Yarn：

cd my-vue3-project
yarn serve

Vue CLI 会启动一个开发服务器，并在的默认浏览器中打开一个新的标签页，显示的 Vue 3 应用。

在这里插入图片描述

验证 Vue 3

要验证是否确实在使用 Vue 3，可以打开项目中的 main.js 或 main.ts 文件（取决于是否选择了 TypeScript）。应该会看到类似下面的代码，其中 createApp 是 Vue 3 中引入的新 API：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

如果看到了这样的代码，那么已经成功创建了一个 Vue 3 的基础框架。

现在，可以开始在的项目中添加组件、路由、状态管理等，并根据需要自定义的 Vue 3 应用。

2.2 使用 Vite 创建

使用 Vite 创建一个 Vue 3 的基础框架（脚手架程序）同样非常简便。Vite 是一个新型的前端构建工具，专为现代浏览器和工具链而设计，提供了极快的冷启动和热模块更新（HMR）速度。以下是使用 Vite 创建 Vue 3 项目的详细步骤：

安装 Node.js 和 npm

首先，确保计算机上安装了 Node.js 和 npm（Node 包管理器）。具体安装方法这里不再赘述，可以在命令行中运行 node -v 和 npm -v 来检查它们是否已安装以及安装的版本。

全局安装 Vite

接下来，需要全局安装 Vite。打开命令行或终端，并运行以下命令：

npm install -g create-vite

或者，如果使用的是 Yarn，可以运行：

yarn global add create-vite

注意：从 Vite 2.x 版本开始，官方推荐使用 npm init vite@latest 命令来创建新项目，而不是全局安装 create-vite。因此，下面的步骤将基于这种新方法。

创建 Vue 3 项目

现在，可以使用 npm init 命令来创建一个新的 Vite 项目，并指定使用 Vue 作为框架：

npm init vite@latest my-vue3-project -- --template vue

将 my-vue3-project 替换为想要的项目名称。这个命令会创建一个名为 my-vue3-project 的新文件夹，并在其中初始化一个 Vite + Vue 3 的项目。

进入项目目录并安装依赖

创建项目后，进入项目目录并安装依赖项：

cd my-vue3-project
npm install

或者，如果使用的是 Yarn：

cd my-vue3-project
yarn

运行项目

安装完依赖项后，可以运行项目：

npm run dev

或者，如果使用的是 Yarn：

yarn dev

Vite 会启动一个开发服务器，并在的默认浏览器中打开一个新的标签页，显示的 Vue 3 应用。应该会在浏览器中看到一个欢迎页面，表明项目已成功创建并正在运行。

相关文章