Vue3 学习全攻略保姆式教程

一、Vue3 简介

Vue3 的发布背景主要源于 Vue2 在开发过程中逐渐暴露的一些问题。随着业务功能的快速增长，复杂组件的代码维护难度加大，缺乏高效的逻辑复用机制，类型推断不够友好，且由于使用 Webpack 导致的打包时间较长。

Vue3 的主要特点包括：

• 性能大幅提升：通过重写虚拟 DOM 、优化 Diff 算法、静态提升、事件监听缓存等手段，使应用的渲染和更新速度更快。

• 更小的体积：移除不常用的 API ，引入 Tree Shaking 机制，只打包实际使用的模块，减少了应用的体积。

• 更灵活的代码组织：Composition API 让开发者能够根据逻辑功能来组织代码，提高了代码的可读性和可维护性。

• 出色的 TypeScript 支持：更好地满足大型项目开发中的类型校验需求，提升代码质量和开发效率。

• 创新的组件特性：如 Fragment 组件允许无根节点，Teleport 组件方便内容传送，Suspense 组件优化异步加载体验。

Vue3 的优势显著，为前端开发带来了更高效、更灵活、更易维护的解决方案，使其在现代前端开发中具有重要的地位和广泛的应用前景。

二、Vue3 新特性

1. 性能提升

Vue3 在性能方面有着显著的优化。在打包大小上，通过移除不常用的 API 以及引入 Tree Shaking 机制，使得打包后的体积大幅减小，减少了应用的加载时间和带宽消耗。

初次渲染方面，Vue3 优化了虚拟 DOM 的创建和初始化过程，提高了组件的初始渲染速度，让用户能够更快地看到页面内容。

更新渲染时，得益于 Diff 算法的优化、静态提升和事件监听缓存等技术，Vue3 能够更精准地判断需要更新的部分，减少不必要的计算和操作，从而显著提高了更新渲染的效率。

在内存使用上，Vue3 对不参与更新的元素进行静态提升，只创建一次，后续渲染直接复用，有效降低了内存占用。

2. 源码升级

Vue3 在源码方面进行了重要的改进。其中，使用 Proxy 代替 defineProperty 实现响应式是一个关键的变化。Proxy 能够直接代理整个对象，而不像 defineProperty 那样需要预先知道要拦截的属性，从而能够检测到对象属性的添加和删除，避免了对深层嵌套对象进行递归遍历的性能损耗。此外，Vue3 的源码在模块拆分上更加细化，职责划分更明确，提高了代码的可维护性和可读性。

3. 拥抱 TypeScript

Vue3 对 TypeScript 提供了更出色的支持。在核心库和官方插件中提供了完整的 TypeScript 类型声明，使得开发者在开发过程中能够获得更好的代码提示和类型检查支持，减少错误和调试时间。组件的选项类型推导也更加强大，自动推导组件的 props、data、computed 和 methods 等选项的类型，减少了重复的类型定义代码。同时，Composition API 与 TypeScript 的结合也更加紧密，进一步提升了代码的类型安全性和可维护性。

4. 新的特性

Composition API：Vue3 的 Composition API 提供了一种更灵活、可组合的组件组织方式。它将相关逻辑代码分组到函数中，使代码更具可读性和可维护性，方便开发者在大型项目中管理复杂的逻辑。

新的内置组件：

• Fragment 组件：允许组件模板不再需要一个根标签，提高了组件模板的灵活性。

• Teleport 组件：能够将组件内部的部分模板传送到指定的 DOM 节点，方便处理特殊的布局需求。

• Suspense 组件：优化了异步组件的加载体验，在加载过程中可以渲染特定的内容。

• Transition 和 TransitionGroup 组件：为元素和多个元素的状态变化提供了丰富的过渡和动画效果。

• KeepAlive 组件：用于缓存动态组件，提高了组件切换时的性能。

三、创建 Vue3 项目

1. 使用 vue-cli 创建

首先，查看 @vue/cli 的版本，可在终端输入 vue -V 命令。若版本低于 4.5.0 ，则需执行升级命令 npm install -g @vue/cli 。

创建 Vue3 项目的命令为 vue create <project-name> ，在创建过程中，会出现模板选择，初学者可以选择默认或手动配置。手动配置时，可通过空格键选择所需的功能，如 Babel 、 Router 、 Vuex 、 CSS Pre-processors 、 Linter / Formatter 等。选择完毕后，按回车键确认。接着选择 Vue 版本，通常选择 3.x 。等待项目创建完成后，进入项目目录，执行 npm install 安装依赖，然后通过 npm run serve 启动项目。在浏览器中输入相应的地址，如 http://localhost:8080/ ，即可查看项目效果。

2. 使用 vite 创建

Vite 的优势众多，如更快的冷启动时间、更快的热更新、简化的配置、原生支持 TypeScript 、灵活的插件系统等。

创建 Vue3 项目的流程如下：

首先，在终端运行 npm create vite@latest 命令。然后填写项目名称，选择前端框架（如 Vue ）和语法类型。接下来，进入项目目录，执行 npm install 安装依赖，再执行 npm run dev 启动项目。此时，在浏览器中打开相应的地址，即可开始项目的开发。

在使用 Vite 创建项目的过程中，还可以根据实际需求进行一些额外的配置，如配置别名、路由、 Vuex 、 Eslint 、 less/sass 等，以满足项目的特定需求。

四、常用 Composition API

1. 拉开序幕的 setup

setup 是 Vue3 中组合式 API 的入口。它的作用是集中管理组件中的数据和逻辑。

返回值有两种情况：若返回一个对象，对象中的属性和方法在模板中可直接使用；若返回一个渲染函数，则可自定义渲染内容。

注意事项包括：尽量不与 Vue2 的配置混用；有重名时 setup 优先；setup 不能是异步函数，否则模板无法获取返回的对象。

2. ref 函数

ref 函数用于定义一个响应式的数据。其语法为 const xxx = ref(initValue) ，创建一个包含响应式数据的引用对象。

在 JavaScript 中操作数据需要通过 xxx.value ，而在模板中读取数据则不需要 value ，可直接使用。

ref 接收的数据类型可以是基本类型，也可以是引用类型。基本类型的响应式通过 Object.defineProperty() 的 get 和 set 完成，引用类型则内部会求助 reactive 函数。

3. reactive 函数

reactive 函数用于定义一个对象类型的响应式数据，语法为 const 代理对象 = reactive(源对象) ，返回一个代理对象。

reactive 定义的响应式数据是深层次的，内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据。

4. Vue3 的响应式原理

Vue2 的响应式原理：对象类型通过 Object.defineProperty() 对属性的读取和修改进行拦截；数组类型通过重写更新数组的一系列方法来实现拦截。但存在新增属性、删除属性以及直接通过下标修改数组时界面不会自动更新的问题。

Vue3 的响应式原理：通过 Proxy 拦截对象中任意属性的变化，包括读写、添加、删除等；通过 Reflect 对源对象的属性进行操作。能有效解决 Vue2 响应式的不足。

5. reactive 与 ref 对比

定义数据：ref 可定义基本类型和引用类型，reactive 主要用于定义对象类型。

原理：ref 通过 Object.defineProperty() 的 get 和 set 实现响应式，reactive 通过 Proxy 。

使用：模板中 ref 的基本类型数据需要 value ，reactive 则不需要。

6. setup 的注意点

setup 执行时机在 beforeCreate 之前执行一次，此时 this 是 undefined 。

setup 的参数包括 props（包含组件外部传递且内部声明接收的属性）和 context（包含 attrs、slots、emit 等）。

五、项目打包

1. 打包的目的

在 Vue3 项目中，打包具有多方面的重要意义。首先，从语法编译的角度来看，浏览器无法直接理解 Vue 组件的代码，需要将其编译为浏览器能够识别和执行的 JavaScript 和 CSS 代码。这确保了项目在浏览器中的正常运行。

性能优化是另一个关键因素。打包能够去除无用的代码，减小文件体积，提高加载速度。通过合并和压缩文件，减少了 HTTP 请求次数，加快了页面的初始加载和后续更新。同时，代码的压缩和混淆增加了代码的安全性，保护了项目的知识产权。

整合第三方模块也是打包的重要作用之一。将分散在项目中的各种第三方库打包在一起，方便管理和部署，提高了代码的可维护性和可扩展性。

此外，打包有助于优化不同浏览器的兼容性，将代码转换为通用的语法，确保在各种主流浏览器中都能稳定运行。

1. 打包的步骤

常见的 Vue3 项目打包指令有 npm run build 。以下是一般的打包操作流程：

首先，确保项目已经安装了必要的依赖，并且项目的配置（如 vue.config.js ）已经根据需求进行了相应的设置，例如设置输出目录、公共路径、是否生成 source map 等。

然后，在项目的根目录下，运行 npm run build 指令。执行过程中，打包工具会按照配置对项目的代码和资源进行处理，包括编译 Vue 组件、处理 CSS 和 JavaScript 文件、合并和压缩资源等。

打包完成后，会在指定的输出目录（通常是 dist 文件夹）中生成打包后的文件，包括 index.html 、压缩后的 CSS 和 JavaScript 文件、以及可能的图片等静态资源。

最后，可以将生成的 dist 文件夹中的内容部署到服务器上，以供用户访问和使用。

六、路由守卫

1. 导航守卫的种类

Vue3 中的导航守卫主要包括全局守卫、独享守卫和组件内守卫三种类型。

• 全局守卫：

• • beforeEach：在路由跳转前触发，常用于登录校验、权限检查等操作。

• • beforeResolve：在导航被确认之前，组件内守卫和异步路由组件被解析之后调用。

• • afterEach：导航被确认时调用，主要用于一些辅助功能，如页面标题更改等。

• 独享守卫：在路由配置中直接定义的 beforeEnter 守卫，仅在进入特定路由前被调用。

• 组件内守卫：

• • beforeRouteEnter：在组件被创建前调用，无法获取组件实例，可通过 next 回调访问。

• • beforeRouteUpdate：当前路由改变且组件被复用时调用，可以访问组件实例。

• • beforeRouteLeave：导航离开组件的对应路由时调用，可以访问组件实例。

2. 导航守卫的使用场景和方法

下面通过代码示例来讲解每个守卫的具体应用。

// 全局前置守卫

router.beforeEach((to, from, next) => {

// 登录校验

if (!isLoggedIn && to.path!== '/login') {

next('/login');

} else {

next();

}

});

// 全局解析守卫

router.beforeResolve((to, from, next) => {

// 异步路由加载权限检查

if (!hasPermissionForAsyncRoute(to)) {

next('/error');

} else {

next();

}

});

// 全局后置钩子

router.afterEach((to, from) => {

// 更改页面标题

document.title = to.meta.title;

});

// 路由独享守卫

const routes = [

{

path: '/admin',

component: AdminComponent,

beforeEnter: (to, from, next) => {

// 管理员权限检查

if (!isAdmin) {

next('/access-denied');

} else {

next();

}

}

}

];

// 组件内守卫

const Foo = {

beforeRouteEnter(to, from, next) {

// 加载初始数据

next(vm => {

vm.fetchInitialData();

});

},

beforeRouteUpdate(to, from, next) {

// 更新组件数据

this.updateData(to.params);

next();

},

beforeRouteLeave(to, from, next) {

// 保存未保存的数据

if (hasUnsavedData) {

const confirmResult = confirm('您有未保存的数据，确定要离开吗？');

if (confirmResult) {

next();

} else {

next(false);

}

} else {

next();

}

}

};

3. 导航守卫的实现原理

导航守卫的实现基于 Vue Router 内部的机制和工作流程。

在导航过程中，全局守卫按照注册顺序依次触发，独享守卫在进入对应路由时触发，组件内守卫根据路由状态的变化在特定时机触发。

beforeEach 和 beforeResolve 等全局守卫通过注册的钩子函数接收路由信息，并通过 next 函数控制导航流程。组件内守卫则与组件的生命周期相结合，实现更细粒度的路由控制。

内部通过 next 函数的不同调用方式来决定是继续导航、中断导航还是跳转至其他路由。同时，利用 Proxy 和 Reflect 等技术实现对路由对象的监听和操作，确保守卫的准确执行。

// 内部实现示例

function handleGuard(to, from, next) {

// 执行守卫逻辑

   if (condition) {

    next();

   } else {

     next(false);

    }
 }

通过了解导航守卫的实现原理，开发者可以更灵活地运用它们来满足项目的需求。

七、实战应用

待办事项管理应用

一个简单但实用的待办事项管理应用可以很好地展示 Vue3 的综合应用和开发技巧。

项目结构

• App.vue：作为主组件，负责整体布局和路由切换。

• TodoList.vue：展示待办事项列表。

• TodoItem.vue：单个待办事项的组件，包含编辑和删除功能。

• TodoForm.vue：用于添加新的待办事项。

功能实现

• 在 TodoList.vue 中，使用 v-for 指令遍历待办事项数据，并通过 v-model 实现双向数据绑定，方便用户编辑。

• TodoItem.vue 里，添加删除按钮，点击触发相应的删除操作。

• TodoForm.vue 中，创建表单收集用户输入，提交时将新事项添加到数据列表。

路由设置

通过 Vue Router 实现不同视图的切换，如待办事项列表视图和添加事项视图。

响应式数据

使用 ref 或 reactive 函数创建响应式的待办事项数据，确保数据的变化能实时反映在界面上。

状态管理（可选）

若项目复杂，可引入 Vuex 进行状态管理，统一管理待办事项的状态。

优化与部署

对应用进行代码分割、懒加载等优化，提高性能。构建生产版本并部署到服务器上供用户使用。

通过这个待办事项管理应用的开发，我们充分运用了 Vue3 的各种特性和技术，实现了一个功能完善、用户体验良好的应用。