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

最新推荐文章于 2025-08-04 14:37:55 发布

跟着汪老师学编程

最新推荐文章于 2025-08-04 14:37:55 发布

阅读量772

点赞数 32

CC 4.0 BY-SA版权

文章标签：前端 vue vue.js

本文链接：https://blog.youkuaiyun.com/qq_22910257/article/details/147044594

一、课程简介

本课程旨在帮助学员从零基础逐步掌握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层显示会自动改变。