Javaweb学习之Vue3初识（一）

不要数手指啦

已于 2024-08-21 20:07:06 修改

阅读量845

点赞数 30

文章标签：学习 ajax 前端

于 2024-08-16 16:42:05 首次发布

本文链接：https://blog.csdn.net/2301_80841939/article/details/141262343

版权

学习资料

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

认识Vue3

Vue 3是Vue.js框架的下一代版本，也被称为Vue.js 3。它是一种流行的JavaScript框架，用于构建交互式和响应式的用户界面。Vue 3在多个方面对Vue.js进行了升级和改进，为开发者提供了更强大、更灵活的开发工具。

以下是Vue 3的一些主要特点和优势：

1. 性能提升

更快的渲染速度：Vue 3通过改进虚拟DOM的算法和底层架构，实现了更快的渲染速度和更低的内存使用率。这意味着在处理大量数据或复杂组件时，Vue 3能够提供更流畅的用户体验。
响应式系统优化：Vue 3使用了基于Proxy的响应式系统，降低了内存开销，并提供了更快的响应速度。这种改进使得Vue 3更适合处理大型应用程序。

2. Composition API

更灵活的逻辑组织：Vue 3引入了Composition API，这是一种新的API风格，允许开发者将组件的逻辑组织在一起，而不是根据选项分散在不同部分。这有助于提高代码的可维护性和可重用性。
更清晰的代码结构：通过Composition API，开发者可以将组件的功能拆分成更小的、可复用的函数（称为composables），从而构建出更清晰、更易于管理的代码结构。

3. 新增特性

Teleport：Teleport是一个新的特性，它允许开发者将内容从一个组件传送到DOM中的不同位置，这对于在模态框等情况下移动DOM元素非常有用。
Suspense：Vue 3引入了Suspense，这是一种新的方式来处理异步数据加载和代码拆分。它允许在等待异步数据时可以显示占位符或加载指示器，以提供更好的用户体验。

4. 更好的TypeScript支持

Vue 3提供了更好的TypeScript支持，包括类型定义文件，以帮助开发者在编码过程中更好地进行类型检查。

5. 体积减小

Vue 3通过移除一些不常用的功能，以及使用Tree-Shaking等技术，帮助减小了包的大小。这使得Vue 3在加载速度和执行效率上更具优势。

6. 渐进式框架

Vue 3继续坚持其“渐进式框架”的理念，意味着开发者可以根据项目的需求选择使用Vue的不同部分。这种灵活性使得Vue 3适用于各种规模的项目。

7. 更好的社区支持和生态

Vue.js拥有一个庞大而活跃的社区，许多优秀的第三方库和插件可供使用。无论是路由管理、状态管理、数据可视化还是UI组件，都能在Vue.js的生态系统中找到合适的解决方案。

vue3和vue2之间的关联

关联

继承与发展：Vue 3是Vue 2的继承和发展，它保留了Vue 2中的许多核心概念和特性，如组件化、指令（如v-bind、v-model等）、生命周期钩子等。这意味着Vue 2的开发者可以相对容易地迁移到Vue 3。
生态系统兼容性：Vue 3的生态系统与Vue 2保持一定程度的兼容性，包括许多Vue 2的插件和库在Vue 3中仍然可以使用（尽管可能需要更新或调整）。这为Vue 2用户迁移到Vue 3提供了便利。
设计理念：Vue 3和Vue 2都遵循渐进式框架的设计理念，即允许开发者根据项目需求选择性地使用Vue.js的功能。这种设计理念确保了Vue框架的灵活性和可扩展性。

差异

性能提升：

响应式系统：Vue 3采用了基于Proxy的响应式系统，相比于Vue 2的Object.defineProperty，Proxy具有更好的性能和更全面的监听能力（如支持监听数组的变化和对象的动态添加/删除属性）。
渲染性能：Vue 3对渲染性能进行了优化，包括静态树提升（Static Tree Hoisting）和优化的Diff算法等，使得在大型应用程序中运行得更快。

API变化：

Composition API：Vue 3引入了Composition API，这是一种新的编写组件的方式，允许开发者将逻辑相关的代码组织在一起，而不是分散在选项（如data、methods、computed等）中。这使得组件的逻辑更加清晰和易于维护。
移除和新增API：Vue 3移除了一些不常用的API（如filters、.sync修饰符等），并新增了一些特性（如Teleport、Suspense等）。

TypeScript支持：Vue 3对TypeScript的支持更加友好，提供了完整的类型定义，使得开发者可以更容易地将Vue项目与TypeScript项目集成。

编码风格：Vue 3鼓励使用更简洁的编码风格，如使用v-for指令时不再需要key属性（但建议使用以优化性能），并引入了新的指令（如v-slot用于具名插槽）。

生命周期钩子：Vue 3对生命周期钩子进行了一些调整，如引入了onMounted、onUpdated等新的钩子函数，以替代Vue 2中的mounted、updated等钩子。

Vue的组件风格

选项式API

特点：使用包含多个选项的对象来描述组件的逻辑，如data、methods、computed、watch、mounted等。这些选项所定义的属性都会暴露在函数内部的this上，它会指向当前的组件实例。

适用场景：对于熟悉面向对象编程的开发者来说，选项式API可能更加直观和易于理解。它遵循了传统的组件结构，将组件的不同部分（如数据、方法、生命周期钩子等）按照选项进行组织。

组合式API

特点：通过导入Vue提供的API函数（如ref、reactive、onMounted等），以函数的方式描述组件的逻辑。这种方式使得组件的逻辑更加灵活和可复用，因为你可以将相关的逻辑组织在一起，形成一个或多个可复用的函数（通常称为composables）。

适用场景：对于需要更高灵活性和可复用性的大型项目，组合式API是一个更好的选择。它允许你以更函数式的方式来编写组件，使得组件的逻辑更加清晰和易于管理。

Vue3的开发环境

Visual Studio Code (VS Code)

概述：VS Code是一款轻量级但功能强大的跨平台代码编辑器，支持在Windows、macOS和Linux上开发Vue应用。

优势：VS Code提供了丰富的插件生态系统，例如Vetur插件，可以提供Vue文件的语法高亮、智能感知和代码片段等功能。此外，VS Code还内置了对JavaScript、CSS等语言的支持，使得前端开发更加高效。

适用场景：VS Code是Vue开发中最受欢迎的工具之一，尤其适合前端开发人员使用。

我在后面介绍Vue的学习时使用的开发环境是VS Code。

WebStorm

概述：WebStorm是一款由JetBrains开发的专业JavaScript IDE。

优势：WebStorm具有强大的代码编辑、调试和测试工具，特别适用于大型Vue项目的开发和维护。它提供了对Vue的原生支持，包括智能代码提示、语法高亮、代码自动完成等功能。

适用场景：对于需要强大代码编辑和调试功能的开发者，WebStorm是一个不错的选择。

Sublime Text

概述：Sublime Text是一款简洁、高效的文本编辑器，可用于Vue开发。

优势：Sublime Text具有丰富的插件生态系统，可以根据个人喜好和需求进行自定义。通过安装相关的插件，Sublime Text可以提供Vue文件的语法高亮和代码片段等功能。

适用场景：对于喜欢轻量级编辑器的开发者，Sublime Text是一个很好的选择。

Atom

概述：Atom是由GitHub开发的一款开源的文本编辑器，支持多种编程语言，包括Vue。

优势：Atom具有丰富的插件生态系统，可以扩展其功能。通过安装Vue相关的插件，Atom可以提供Vue文件的语法高亮、智能感知和代码片段等功能。

适用场景：Atom的开源特性和可扩展性使得它成为许多开发者的选择。

IntelliJ IDEA

概述：IntelliJ IDEA是一款由JetBrains开发的Java开发工具，也提供了对Vue的开发支持。

优势：IntelliJ IDEA具有强大的代码分析和重构功能，可以帮助开发者更轻松地编写和维护Vue项目。

适用场景：对于需要Java和Vue结合开发的场景，IntelliJ IDEA是一个很好的选择。

Eclipse

概述：Eclipse是一款功能强大的开发工具，支持多种编程语言和框架。

优势：对于使用Java进行Vue开发的开发人员来说，Eclipse可以是一个不错的选择。它提供了丰富的插件和工具，支持Vue项目的开发和调试。

适用场景：Eclipse的跨平台特性和丰富的插件使得它适用于多种开发场景。

在线编译器

概述：还可以使用一些在线编译器来进行Vue开发，如CodeSandbox、JSFiddle等。

优势：这些在线编译器提供了一个便捷的环境，可以在浏览器中直接编写和运行Vue代码，无需安装额外的软件。

适用场景：对于快速原型设计、代码演示或学习Vue的初学者来说，在线编译器是一个很好的选择。

Vue3环境配置

以下是配置Vue 3开发环境的一般步骤：

1. 安装Node.js和npm

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。它允许JavaScript在服务器端运行，而不仅仅是在浏览器中。Node.js的出现极大地扩展了JavaScript的使用范围，使得JavaScript开发者能够使用同一种语言来编写服务器端和客户端的代码。

Node.js的特点包括：

非阻塞I/O：Node.js使用非阻塞I/O模型，使得它非常适合处理高并发请求。

事件驱动：Node.js采用事件驱动的方式来处理请求和响应，提高了应用程序的响应速度和吞吐量。

单线程：虽然Node.js运行在单线程上，但它使用了libuv库来管理后台任务，如文件I/O、DNS查询等，这些任务会在单独的线程池中执行，从而避免了JavaScript执行时的阻塞。

npm（Node Package Manager）是Node.js的包管理器。它允许你安装、共享和管理Node.js包（即模块和库）。npm是Node.js生态系统中不可或缺的一部分，因为它提供了成千上万的包，这些包可以帮助你快速构建应用程序，而无需从头开始编写所有代码。

npm的特点包括：

包管理：npm允许你安装、更新、删除和列出项目依赖项。

社区支持：npm拥有一个庞大的社区，你可以在其中找到几乎任何你需要的包。

版本控制：npm支持语义化版本控制（Semantic Versioning），这有助于管理包的依赖关系和兼容性。

脚本执行：npm允许你在package.json文件中定义脚本，这些脚本可以在项目的生命周期中自动执行，如安装依赖、构建项目等。

Node.js：Vue 3项目通常使用npm（Node Package Manager，Node.js的包管理器）来管理项目依赖。因此，首先需要安装Node.js，npm会作为Node.js的默认包管理工具一同安装。
验证安装：安装完成后，可以通过在命令行或终端中运行node -v和npm -v来验证Node.js和npm是否成功安装，并查看其版本信息。

2. 安装Vue CLI

Vue CLI：Vue CLI是Vue官方提供的脚手架工具，可以快速搭建Vue项目。通过运行npm install -g @vue/cli命令可以全局安装Vue CLI。

3. 创建Vue 3项目

使用Vue CLI创建项目：在命令行或终端中，运行vue create <project-name>命令来创建一个新的Vue项目。在创建过程中，Vue CLI会询问是否使用Vue 3，选择相应的选项即可创建Vue 3项目。
配置选项：在创建项目时，还可以选择添加其他功能插件，如TypeScript、Vue Router、Vuex、ESLint、Prettier等，这些插件可以帮助你更高效地开发Vue 3项目。