当前位置：首页 > news >正文

37、web前端开发之Vue3保姆教程(一)

news 来源：原创 2025/8/23 19:03:06

一、课程简介

本课程旨在帮助学员从零基础逐步掌握Web前端开发的核心技术，涵盖当前前端开发中的关键工具和框架。课程内容包括：

Vue 3：主流前端框架，支持组件化开发和响应式数据管理，帮助学员高效构建现代Web应用。
TypeScript：增强版JavaScript，提供静态类型支持，提高代码的可维护性和安全性，帮助开发者编写更健壮的代码。
ECharts：强大的数据可视化库，用于创建丰富的图表和可视化报表，提升数据展示能力。
Element Plus：基于Vue 3的UI组件库，提供丰富的界面组件，助力快速搭建用户友好的Web应用界面。

通过本课程的学习，学员将掌握从前端框架搭建到数据可视化和UI开发的完整流程，具备独立开发Web应用的能力，并通过实战项目提升技能。

二、Vue3环境安装和项目搭建

1、VUE3简介

1、什么是Vue3

Vue 3 是一个流行的开源JavaScript库，用于构建用户界面和单页面应用。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，它带来了许多新特性和改进，包括更好的性能、更小的打包大小、更好的TypeScript支持、全新的组合式 API，以及一些新的内置组件。

2、Vue3的特点

Vue 3的一些主要特点和改进：

**响应式系统：**Vue 3使用Proxy对象替代了Vue 2中基于Object.defineProperty的劫持方式。这样的改变使得Vue 3的响应式系统更强大和灵活。它能够捕获更多类型的变更，提供更好的性能，并且能够处理动态添加的属性和删除属性。

组件模型：Vue 3引入了组合式API（Composition API），作为选项式API（Options API）的补充。组合式API允许开发人员更好地组织和复用组件逻辑，通过使用函数来组织代码，而不仅仅依靠选项。这种方式提供了更灵活、组合性更强的组件开发方式。

性能优化：Vue 3采用了虚拟DOM算法的改进，通过静态提升（Static Nodes Hoisting）和基于模块的编译优化，提供了更好的性能。它具有更高的渲染速度、更小的包大小，以及更好的Tree-shaking支持，使您的应用程序更高效。

Teleport组件：Vue 3引入了Teleport组件，它使得在DOM树中的任何位置渲染组件变得更容易。它可以帮助您处理跨组件层级的弹出窗口、对话框和模态框等场景。

TypeScript支持：Vue 3更好地集成了TypeScript，并提供了更准确的类型推断和类型检查。这使得在Vue应用程序中使用TypeScript变得更加流畅和安全。

3、JavaScript和TypeScript的区别和联系

TypeScript 与 JavaScript，那么每个 JavaScript 代码在 TypeScript 中都是有效的。这意味着 TypeScript 是 JavaScript 的超集。

JavaScript + 更多功能 = TypeScript

1、TypeScript可以使用JavaScript 中的所有代码和编码概念，TypeScript是为了使JavaScript 的开发变得更加容易而创建的。例如，TypeScript 使用类型和接口等概念来描述正在使用的数据，这使开发人员能够快速检测错误并调试应用程序
2、TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。
3、JavaScript 代码可以在无需任何修改的情况下与TypeScript 一同工作，同时可以使用编译器将TypeScript 代码转换为 JavaScript。
4、TypeScript 通过类型注解提供编译时的静态类型检查。
5、TypeScript 中的数据要求带有明确的类型，JavaScript不要求。
6、TypeScript 为函数提供了缺省参数值。
7、TypeScript 引入了JavaScript 中没有的“类”概念。
8、TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。

4、Vue 3 和 MVVM 模式

4.1.MVVM 模式简介

Vue有一个重要特点是当数据发生变化时，可以自动更新视图，那这个是怎么实现的。这是因为Vue采用了MVVM架构模式。那什么是MVVM呢。

MVVM（Model-View-ViewModel）是一种软件架构模式，旨在分离 UI（视图）和业务逻辑，以提升代码的可维护性和开发效率。在这种模式中：

Model（模型）：管理数据和业务逻辑。
View（视图）：负责 UI 界面的展示。
ViewModel（视图模型）：充当 Model 和 View 之间的桥梁，通过双向绑定同步数据和视图。

MVVM模式结构图

在这里插入图片描述

可以看到MVVM是一个MVC的增强版，正式连接了视图和模型，将表示逻辑从Controller移出放到一个新的对象里，即ViewModel。它实现了View和Model的自动同步，即当Model的属性改变时，我们不用再自己手动操作Dom元素来改变View的显示，而是改变属性后该属性对应的View层显示会自动改变。

4.2 Vue 3 中的 MVVM 模式

Vue 作为一个渐进式框架，虽然不严格规定必须遵循某种设计模式，但它的核心理念与 MVVM 模式高度契合。Vue 尤其通过其响应式系统和双向绑定能力，轻松实现了 View 和 Model 之间的同步。

在 Vue 2 中，Vue 的数据绑定与组件逻辑非常符合 MVVM 的思想，但在 Vue 3 引入的 Composition API 后，设计思路更加灵活。我们可以说，Vu