2024 年最新前端工程师 Vue3 框架详细教程（更新中）

vue3 前端框架概述

vue 3 是 Vue.js 的最新版本，是一个用于构建用户界面的渐进式 JavaScript 框架。和 vue 2 相比，vue 3 引入了组合式 API，使开发者可以通过函数组织代码逻辑，适合处理复杂功能。vue 3 在性能上也有显著提升，特别是在大型应用中。

vue 3 利用了 Proxy 对象来实现响应式数据，替代了 vue 2 中的 Object.defineProperty，从而提高了性能和灵活性。vue 3 的 Tree-shaking 功能使得未使用的代码不会被打包，降低了打包体积。vue 3 还增强了 TypeScript 支持，提升了开发体验。新的渲染机制改善了应用的运行效率，并且 vue 3 支持自定义渲染器，能够轻松构建不同平台上的应用。

vue 官方网站：https://vuejs.org/

Tree-shaking 树摇

Tree-shaking 是一种用于移除 JavaScript 应用中未使用代码的优化技术。它通过静态分析模块的依赖关系，只将实际使用到的代码打包到最终的输出文件中，而未引用的部分则被 “摇掉” (移除)，从而减少打包体积，提升应用性能。

vue 3 核心库经过优化，支持 Tree-shaking。这意味着如果你只使用 Vue 中的某些功能模块，未使用的部分不会被打包到最终文件中，从而减小应用的体积。这在构建大型应用时尤为重要。Tree-shaking 是在构建工具（如 Webpack、Vite、Rollup）中实现的，它们会分析代码并自动移除未使用的部分。

vite 前端构建工具

Vite 是一种新型前端构建工具，专为现代开发而设计，提供极速的开发服务器和快速的构建。和传统的打包工具不同，Vite 利用浏览器原生 ES 模块进行按需加载，大幅缩短了开发环境中的启动时间。它通过 ESBuild 进行预打包，速度非常快。Vite 同时支持 Vue、React、Svelte 等现代框架，具有优秀的插件生态。其生产环境下的构建过程也采用 Rollup，确保高效打包和代码拆分，适用于从小型项目到大型应用的开发。

vite 官方网站：https://vitejs.dev/

安装 vite 前端构建工具

npm install vite --save-dev

Vite 和 Webpack 区别

特性	Vite	Webpack
启动速度	利用浏览器原生 ES 模块，启动极快，无需完整打包	启动时需要完整打包，尤其在大型项目中启动较慢
打包方式	开发环境不打包，生产环境使用 Rollup 进行优化打包	无论开发还是生产模式，都通过 loaders 和 plugins 完整打包
热模块替换 (HMR)	基于原生 ES 模块，HMR 速度非常快	支持 HMR，但更新速度比 Vite 慢，需处理模块依赖链
依赖处理	使用 ESBuild 预构建依赖，处理速度极快	传统的 JavaScript 打包方式，处理依赖相对较慢
配置	配置简洁，开箱即用，适合现代框架（Vue、React 等）	功能强大，支持广泛，配置复杂，适合复杂的项目
生态系统	新兴但发展迅速，特别适合 Vue 3、React 等现代框架	生态系统成熟，适用于复杂的企业级应用，社区资源丰富
生产环境打包	使用 Rollup，具有高效的代码拆分和 Tree-shaking	使用自身机制，支持各种优化，适合复杂应用的打包
依赖预构建	使用 ESBuild 进行预构建，速度比传统方法快 10 到 100 倍	传统方式处理依赖，速度相对较慢
适用场景	小型到中型项目，追求快速开发和高效热更新	大型、复杂项目，支持更广泛的功能和场景

使用 vite 创建项目流程

1. 使用 npm 安装 Vite

首先确保你已经安装了 Node.js，然后可以使用以下命令快速安装并创建一个 Vite 项目。

npm create vite@latest

2. 设置项目名称

运行命令后，Vite 会提示你设置项目名称。

✔ Project name: … my-vite-project

3. 选择模板

接下来 Vite 会让你选择一个框架模板。选择你需要的框架（例如 Vue、React 或 Vanilla JavaScript）。

✔ Select a framework: » 
  - Vanilla
  - Vue
  - React
  - Svelte
  - Preact
  - Lit
  - Others

4. cd 项目目录、安装依赖

项目创建完成后，进入项目目录并安装依赖。

cd my-vite-project
npm install

5. 启动开发服务器

安装完依赖后，可以启动 Vite 开发服务器。

npm run dev

开发服务器会自动启动，并通过 http://localhost:5173 提供服务，你可以在浏览器中访问该地址查看项目。

6. 构建项目（生产环境）

当你准备将项目发布到生产环境时，可以使用以下命令进行构建。构建完成后，生成的文件会放在 dist 文件夹中。

npm run build

使用 npm 创建 vue3 项目

D:\linenazi> npm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... linenazi-project
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in D:\linenazi\linenazi-project...

Done. Now run:

  cd linenazi-project
  npm install
  npm run dev

初始化项目：安装 node_modules 依赖

npm i

编辑器 .vscode 设置

.vscode 是 Visual Studio Code (VS Code) 编辑器的一个隐藏文件夹，用于存储与特定工作区相关的配置和设置。这个文件夹通常位于项目根目录中。.vscode 文件夹提供了一种方式来为特定项目自定义 VS Code 的行为和外观，使得团队协作时能够保持一致的开发环境，提升开发效率。

工作区设置

.vscode/settings.json：该文件可以用于定义项目特定的设置，例如代码格式化规则、主题、文件编码等。这些设置只适用于该项目，而不会影响全局配置。

扩展推荐

.vscode/extensions.json：这个文件可以列出推荐的扩展，使团队成员在打开项目时能够看到建议安装的扩展，提升开发体验。

调试配置

.vscode/launch.json：用于配置调试器的设置，定义如何启动和调试应用程序。你可以指定调试的程序、参数、环境变量等。

任务配置

.vscode/tasks.json：可以定义常用的任务（例如构建、测试、运行脚本等），让你可以通过 VS Code 的任务面板轻松执行这些任务。

代码片段

.vscode/snippets 文件夹：可以存放自定义代码片段文件，方便在编写代码时快速插入常用代码块。

键盘快捷键

.vscode/keybindings.json：可以存放自定义的键盘快捷键设置，适用于该工作区。

使用 npm i 安装依赖流程

npm i 是 npm install 的简写，通常用于安装项目的依赖包。npm install 是 Node.js 包管理工具 npm 的一个常见命令，执行时会根据项目中的 package.json 文件安装所需的依赖。npm i 是一个快捷命令，用于安装项目的依赖包，确保项目能够在开发或生产环境中正常运行。

1. 安装项目依赖

npm i 会根据项目根目录中的 package.json 文件安装所有列出的依赖项。

dependencies：应用程序运行时所需的依赖包。
devDependencies：开发环境中使用的依赖包（如测试框架、构建工具等）。

2. 生成或更新 node_modules 文件夹

安装完成后，npm i 会在项目目录下生成一个 node_modules 文件夹，里面包含所有安装的依赖包及其依赖项。如果该文件夹已经存在，npm i 会检查并更新依赖包版本。

3. 生成或更新 package-lock.json

当运行 npm i 时，npm 会根据安装的具体版本生成或更新 package-lock.json 文件，该文件记录了确切的包版本信息，确保团队中的每个人安装的包版本一致。

4. 安装指定版本的依赖

你也可以通过 npm i <package> 来安装特定的依赖包。例如，npm i lodash 会安装最新版本的 lodash，而 npm i [email protected] 会安装指定版本。

5. 安装全局包

如果使用 -g 选项，例如 npm i -g typescript，该包将被全局安装，这意味着你可以在系统的任何地方使用该包。

6. 自动安装缺失的依赖

当 node_modules 文件夹丢失或者某些依赖没有安装时，运行 npm i 会自动安装这些缺失的依赖，确保项目正常运行。

vite.config.ts 配置

官方文档地址：https://vitejs.dev/config/

Vue 3 应用程序的标准启动方式，它展示了如何创建一个 Vue 应用并将其挂载到页面上。通过这种方式，Vue 能够在指定的 DOM 节点中渲染组件，实现动态的用户界面。

1. Vue createApp 工厂函数

createApp 是 Vue 3 中用于创建应用实例的工厂函数，它接受一个根组件作为参数，并返回一个应用实例对象。该对象提供了一系列方法用于配置和挂载应用，比如 mount 方法将应用挂载到指定的 DOM 元素上。createApp 允许开发者在应用级别上注册全局配置和插件，支持使用 Composition API 来管理组件状态和逻辑。它是 Vue 3 应用的入口点，简化了应用的创建和管理过程，使得开发者可以更加灵活地构建复杂的用户界面。

从 vue 包中导入 createApp 函数。createApp 是用来创建 Vue 应用实例的函数。

import {
    
     createApp } from 'vue';

2. App 根组件

App 根组件是 Vue 应用的主要组件，通常用于定义应用的结构、布局和基本逻辑。它是整个 Vue 应用的入口点，包含了其他子组件并负责管理它们的状态和行为。

这里导入了根组件 App，它是一个 Vue 组件，通常是应用程序的主要部分，包含了应用的模板、逻辑和样式。

import App from './App.vue';

3. 创建并挂载应用

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

createApp(App)：使用 createApp 函数创建一个 Vue 应用实例，并传入根组件 App。

.mount('#app')：将创建的 Vue 应用挂载到 DOM 中 id 为 app 的元素上。这意味着 Vue 会控制这个元素及其子元素，提供响应式数据绑定和组件功能。

Chrome vue.js devtools

Chrome Vue.js Devtools 是一个浏览器扩展，专为 Vue.js 应用程序开发和调试设计。它提供了一个直观的用户界面，允许开发者实时查看和修改 Vue 组件的状态、属性和事件。

主要功能包括：组件树视图，展示应用的组件结构和层级；状态查看，实时监控组件的数据和计算属性；事件跟踪，查看组件之间的事件通信；时间旅行调试，支持在状态变化间回退；以及 Vuex 状态管理的集成，便于监控和调试状态管理流。通过这些工具，开发者可以更高效地调试和优化 Vue 应用，提高开发体验。

插件官方地址：https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN&utm_source=ext_sidebar

Composition API

Composition API 是 Vue 3 引入的一种更灵活、更可复用的编写组件逻辑的方法。它通过 setup() 函数将组件的逻辑按功能组织，而不是像 Options API 那样按 data、methods、computed 等选项分散逻辑。

Options API 和 Composition API 区别

特性	Options API	Composition API
写法	使用 data、methods、computed 等选项组织逻辑	使用 setup() 函数，通过组合函数组织逻辑
逻辑组织	逻辑通常是按功能分割，难以跨选项共享状态	逻辑可以按特性分组，跨功能共享逻辑和状态变得更容易
灵活性	灵活性较低，状态和方法在各个选项中分散	更加灵活，允许将逻辑和状态提取为可复用的独立函数
代码复用	依赖 mixins 和 extends，可能导致命名冲突和难以追踪	通过组合函数（Composable），更容易复用和共享逻辑
TypeScript 支持	对 TypeScript 的支持较弱，类型推断复杂	与 TypeScript 兼容性更好，类型推断更清晰
学习曲线	对初学者更友好，易于上手	需要更深入的 JavaScript 知识，学习曲线较陡
状态响应式	响应式状态由 Vue 自动处理	手动使用 ref 和 reactive 创建响应式状态
代码结构	代码结构清晰，但大型组件会导致多个选项分散逻辑	逻辑更加集中，大型组件的逻辑组织更清晰
性能优化	Vue 内部自动优化	开发者可以更精细地控制性能优化（如懒加载、依赖收集等）

setup 函数概述

setup 函数是 Vue 3 Composition API 的核心，它用于定义组件的逻辑，并在组件实例创建之前执行。setup 函数替代了 Vue 2 中的 data、methods、computed、watch 等选项，使得逻辑更灵活地组合和复用。

setup 函数在 Vue 3 中为组织和管理组件逻辑提供了极大的灵活性。它将逻辑按功能分组，简化了代码的结构和复用，使得复杂的组件更容易维护和扩展。

setup 函数参数

setup 接受两个参数：props：父组件传递的 props，它是只读的。context：包含 attrs、slots 和 emit，用于访问组件的上下文。

setup(props, context) {
    
    
}

props 是父组件传入的属性
context.attrs 包含非 prop 的属性
context.slots 包含插槽内容
context.emit 用于触发事件

setup 函数返回值

setup 函数的返回值决定了模板中可以访问的数据和方法。通常返回一个对象，包含响应式数据、方法、计算属性等。

setup() {
    
    
	const count = ref(0);
	
	function increment() {
    
    
		count.value++;
	}
	
	return {
    
     count, increment };
}

在模板中可以直接使用 count 和 increment。

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

setup 响应式数据

在 setup 中可以使用 Vue 的响应式 API，如 ref 和 reactive，来创建响应式状态。

ref：用于处理原始值的响应式数据。
reactive：用于创建复杂对象的响应式数据。

import {
    
     ref, reactive } from 'vue';

setup() {
    
    
	const count = ref(0);
	const user = reactive({
    
     name: 'John', age: 30 });
	
	return {
    
     count, user };
}

setup 生命周期钩子

在 setup 中，可以使用生命周期钩子（如 onMounted、onUpdated、onUnmounted）来处理组件生命周期事件。

import {
    
     onMounted, onUnmounted } from 'vue';

setup() {
    
    
	onMounted(() => {
    
    
		console.log('Component mounted');
	});

	onUnmounted(() => {
    
    
		console.log('Component unmounted');
	});
	
	return {
    
    };
}

setup 组合逻辑

通过将逻辑封装到可复用的函数中（Composable），可以提高代码的复用性和可维护性。

import {
    
     ref, onMounted } from 'vue';

function useCounter() {
    
    
    const count = ref(0);

    function increment() {
    
    
        count.value++;
    }

    return {
    
     count, increment };
}

setup() {
    
    
    const {
    
     count, increment } = useCounter();

    return {
    
     count, increment };
}

setup 函数语法糖

在 Vue 3 中，<script setup> 是一种简化版的 setup 语法糖，旨在使组件代码更加简洁和易读。它自动将 setup() 函数内的逻辑内联到 <script setup> 中，无需显式调用 setup()，大大简化了组件的写法。

<script setup> 语法糖大大简化了 Vue 3 中 setup 函数的写法，使代码更加简洁易读。它自动将声明的变量和函数暴露给模板，省略了传统 setup 函数中的许多重复操作，非常适合开发者快速编写和管理 Vue 组件。

setup 基本语法

使用 <script setup> 时，所有在其中声明的变量、函数、响应式数据等，都可以直接在模板中使用，而不需要通过 return 返回。

<template>
    <div>
        <p>Count: {
    
    {
    
     count }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>
  
<script setup>
import {
    
     ref } from 'vue';

const count = ref(0);

function increment() {
    
    
    count.value++;
}
</script>

语法糖 vs 常规 setup 函数

<script setup> 中声明的变量、函数、响应式数据、导入的模块等会自动被暴露到模板中，无需 return。避免了传统 setup() 函数的显式返回，代码更清晰、简短。

传统 setup 写法

<template>
    <div>
        <p>{
    
    {
    
     message }}</p>
    </div>
</template>
  
<script>
import {
    
     ref } from 'vue';

export default {
    
    
    setup() {
    
    
        const message = ref('Hello, Vue!');
        return {
    
     message };
    }
}
</script>

使用 <script setup> 语法糖

<template>
    <div>
        <p>{
    
    {
    
     message }}</p>
    </div>
</template>
  
<script setup>
import {
    
     ref } from 'vue';

const message = ref('Hello, Vue!');
</script>

Props 和 Emits

在 <script setup> 中，可以直接使用 defineProps 和 defineEmits 这两个内置函数来处理 props 和 emits，而不需要显式定义 props 和 emit。

setup 处理 props

<template>
	<p>{
    
    {
    
     name }}</p>
</template>

<script setup>
const props = defineProps({
    
    
	name: String
});
</script>

setup 处理 emit

<template>
	<button @click="handleClick">Click me</button>
</template>

<script setup>
const emit = defineEmits(['update']);

function handleClick() {
    
    
	emit('update', 'New value');
}
</script>

setup 适配 TypeScript

<script setup> 支持 TypeScript，可以直接在声明中使用类型提示，无需额外的 defineComponent 包装。

<script setup lang="ts">
import {
    
     ref } from 'vue';

const count = ref<number>(0);
</script>

setup 组合逻辑

和传统的 setup 一样，<script setup> 也可以调用组合函数（Composable）以便复用逻辑。

<script setup>
import {
    
     ref, onMounted } from 'vue';

function useCounter() {
    
    
	const count = ref(0);
	function increment() {
    
    
	  	count.value++;
	}
	return {
    
     count, increment };
}

const {
    
     count, increment } = useCounter();

onMounted(() => {
    
    
	console.log('Component mounted');
});
</script>

ref 创建响应式数据

在 Vue 3 中，ref 是用于创建响应式数据的工具，适用于基本类型（如数字、字符串、布尔值等）或单个变量。ref 包装了一个值，并在这个值发生变化时，自动触发依赖该值的视图更新。

ref 是 Vue 3 中创建响应式数据的基础工具，适用于基本数据类型。通过 .value 访问或修改响应式数据。在模板中，Vue 会自动解包 ref 的 .value，直接使用变量即可。它是让 Vue 组件的状态和视图保持同步更新的核心机制之一。

使用 ref 创建响应式数据

首先需要从 Vue 中导入 ref 函数。使用 ref() 包裹原始值来创建响应式数据，返回的对象会自动追踪其变化并通知视图更新。

import {
    
     ref } from 'vue';

const count = ref(0);  // 创建一个响应式的 count 变量，初始值为 0

访问和修改 ref 的值

ref 返回的是一个包含 .value 属性的对象，访问和修改这个值时，需要通过 .value。

count.value++;  // 修改 count 的值
console.log(count.value);  // 访问 count 的值

template 使用 ref

在模板中可以直接使用 ref，Vue 会自动解包 .value，因此不需要显式访问 .value。在这个例子中，点击按钮会触发 increment 函数，count.value 的值增加，并且自动触发页面视图的更新。

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

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

const count = ref(0);  	// 创建响应式数据

function increment() {
    
    
	count.value++;  	// 修改响应式数据
}
</script>

ref 的应用场景

基本数据类型：`ref` 适合用于数字、字符串、布尔值等基本类型的数据响应式处理。
DOM 元素引用：`ref` 还可以用于获取和操作 DOM 元素。

<template>
	<input ref="inputRef" placeholder="Type something">
</template>

<script setup>
import {
    
     ref, onMounted } from 'vue';

const inputRef = ref(null);  // 创建一个 DOM 元素的 ref

onMounted(() => {
    
    
	inputRef.value.focus();  // 在组件挂载后，聚焦输入框
});
</script>

reactive 创建响应式数据

在 Vue 3 中，reactive 是用于创建复杂对象（如数组和对象）的响应式数据工具。与 ref 主要用于包装原始数据不同，reactive 会深度将整个对象或数组变成响应式的，因此适合处理嵌套的结构或多个属性。

简单来说，reactive 用于创建对象或数组的响应式数据，适合复杂的数据结构。直接操作 reactive 对象的属性和元素，无需 .value。reactive 会深度追踪对象或数组中所有的变化，自动更新依赖它们的视图。

使用 reactive 创建响应式数据

从 Vue 中导入 reactive 函数。使用 reactive() 包裹一个对象或数组，这样该对象中的所有属性都会变成响应式的。

import {
    
     reactive } from 'vue';

const state = reactive({
    
    
	count: 0,
	user: {
    
    
		name: 'John',
		age: 25
	}
});

访问、修改 reactive 数据

和普通 JavaScript 对象一样，访问和修改 reactive 对象中的属性无需通过 .value，直接操作对象即可，Vue 会自动追踪所有变化。Vue 会自动跟踪这些属性的变化，并更新依赖这些值的视图。

state.count++;  			// 修改 count 值
state.user.name = 'Alice';  // 修改 user.name

template 使用 reactive

在模板中，可以直接使用 reactive 创建的响应式对象，Vue 会自动追踪依赖并在数据变化时更新视图。在这个例子中，点击按钮会触发 increment 函数，state.count 增加，Vue 会自动更新页面视图。

<template>
    <div>
        <p>Count: {
    
    {
    
     state.count }}</p>
        <p>User: {
    
    {
    
     state.user.name }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>
  
<script setup>
import {
    
     reactive } from 'vue';

const state = reactive({
    
    
    count: 0,
    user: {
    
    
        name: 'John',
        age: 25
    }
});

function increment() {
    
    
    state.count++;  // 修改 count
}
</script>

reactive 应用场景

对象或数组：处理多个属性、嵌套对象、或者数组时使用 `reactive`，它可以让每个属性和元素都变成响应式的。
复杂状态管理：当组件中有多个互相关联的状态时，`reactive` 能让你更自然地管理它们的响应性。

ref 和 reactive 区别

特性	ref	reactive
适用场景	用于包装原始值（如数字、字符串、布尔值等）	用于包装对象或数组，深度响应式
访问方式	通过 .value 访问或修改值	直接访问或修改对象属性，无需 .value
响应式处理	只对包裹的单个值进行响应式处理	深度响应式处理，追踪对象所有属性的变化
嵌套结构支持	嵌套对象或数组也需要使用 .value 访问	自动处理嵌套对象，所有属性都响应式
性能	适用于简单的值，性能开销较小	适用于复杂对象，可能有较大的性能开销
常用场景	计数器、输入框值等简单变量	管理表单数据、复杂状态、嵌套对象或列表
类型支持	可以与原始类型直接绑定，如 ref<number>	处理复杂类型或接口时非常方便
模板解包	模板中自动解包 .value，无需手动访问 .value	模板中无需额外处理，直接使用对象属性
示例代码	const count = ref(0); count.value++;	const state = reactive({ count: 0 }); state.count++;

ref 适用于原始值的响应式处理，轻量且直接，但对于复杂对象需要手动处理 .value。reactive 适合管理复杂的对象和数组，深度响应式管理嵌套数据结构，操作更加自然。

更新中······