从 javascript 库到框架，Vue 的旅程令人印象深刻，尤其是当您考虑到它如何仍然保持其轻量级特性时。 Vue3 提供了几个功能，包括 Pinia，它可以更轻松地进行状态管理，以及在 Vite 上运行的构建工具链。无论您是想将您的应用程序更新到 Vue3 还是只是想尝试使用该框架，我们都在这里编译了您需要了解的有关 Vue3 的所有信息！
什么是 Vue3？
在我们了解您将在 Vue3 中看到的变化之前，让我们先来看看 Vue.js 及其核心组件是什么：
Vue
Vue.js 是一个开源的前端JavaScript 框架，可用于创建用户界面。该框架提供了一种声明性和基于组件的编码方法，有助于用户显示器的快速开发。它可用于开发基本或复杂的界面，并建立在行业标准的 HTML、CSS 和 JavaScript 之上。 Vue.js 的流行和 Vue.js 的庞大用户群的原因是其对程序员友好的语法、易用性和定义良好的文档。
如上所述，Vue.js 建立在两个核心特征之上：
声明式呈现使用户能够根据 JavaScript 状态以声明方式定义 HTML 输出。 Vue.js 在模板语法的帮助下扩展了普通的 HTML。
反应性- Vue.js 主动监控 JavaScript 状态，当它被修改时，它会快速刷新 DOM。
Vue3.0
使用 Vue 2 进行编码的工程师现在需要更新到 Vue3。这是因为它具有新功能，使设计可读、一致的组件变得更加容易和更好的方法来组织我们的应用程序。 Vue3 更人性化、更短且更易于维护。 Vue3 的一些显着特性是 Teleport、Fragments 和多个 v-model。
最新版本还摆脱了过滤器，并具有状态驱动的 CSS 变量以及实验性的悬念特性。它还具有生命周期命名修改和单个文件组件更改。
Vue3 发布了吗？
可用的最新版 Vue - Vue3 最初于 2018 年年中宣布，并于 2020 年 9 月正式发布。Vue3.0 于 2022 年 2 月 7 日被宣布为渐进式 JavaScript 框架的官方默认版本。
Vue3 有什么新功能？
Vue3 中最令人期待的变化是：
提供/注入
Vue 2 允许用户通过代码中的 props 传递字符串、数组、对象等数据。这样的数据可以很容易地从父元素传递到它的子元素。然而，使用 props 使得将数据从父元素发送到深度嵌套的子元素变得更具挑战性。因此，开发人员不得不使用 Vuex Store 和 Event Hub。 Vue 2.2.0 也包含提供/注入，但不建议在通用程序代码中使用。
但是，通过使用 Vue3 中改进的提供/注入组合，我们可以更快速、更整洁地传递数据。顾名思义，我们利用提供来使数据可以从父元素访问到其任何子组件，而不管这些子元素的嵌套程度如何。在这里，我们可以将提供用作对象或函数。
传送
根据您要构建的应用程序的逻辑，您的组件可能会显示在与您希望它们显示的位置不同的位置。例如，您可能想要创建一个旨在显示并占据整个屏幕的弹出窗口。为了克服这个问题，我们可以在 CSS 中使用此类组件的位置属性，但是使用 Vue3，开发人员也可以使用 Teleport。
Teleport 让程序员可以从包装它的初始容器中取出一个元素，并将它们移动到页面上正在使用它们的任何现有组件中。例如，您可以将标题元素从#app div 重新定位到标题。请记住，您只能使用 Teleport 将元素移动到存在于 Vue DOM 之外的代码组件中。
碎片
在 Vue 2 的文件模板中很难有多个根组件。程序员开始将所有组件封装在父组件中作为解决方案。有时，程序员可能需要在没有容器包裹的情况下渲染元素。工程师现在可以在其根模板文件中拥有大量项目，这要归功于 Fragments，这是 Vue3 中添加的一项功能。
全局 Vue API
您可能经常在 Vue 应用程序的 main.js 文件中找到 Vue.component 或 Vue.use。它们被称为 Global APIs ，在 Vue 2 中有很多这样的方法。在这里，如果您的应用程序有多个实例，它们都放在 Vue 之上。很难将特定功能限制在单个应用程序实例中。
Vue3 通过引入一个名为 createApp 的新全局 API 解决了这个问题。使用此方法，您可以获得 Vue 应用程序的新实例。所有与 Vue 2.x 相关的 API 都将转移到单独的应用程序实例中。这允许您的应用程序的每个实例都具有专属于它的功能，而不会中断已在使用的其他实例。
事件 API
除了使用 Vuex Store，使用 Event Bus 是程序员用来在不共享父子上下文的元素之间传递数据的最流行方法之一。但是， $on、$off和 $once 等代码在 Vue3 中都被删除了。但是 $emit 仍然可以访问，因为子元素必须向其父元素发出事件。一个解决方案是使用提供/注入。
Vite 驱动的构建工具链
Vite 由 Vue 的创建者 Evan You 设计，是一流的 Vue SFC 支持工具链，轻量级和快速创建。 Vite 现在是标准 Vue3 构建配置背后的引擎。构建在 webpack 之上的模块捆绑器@vue-cli/service将在启动、热重载和编译时打包整个 Vue 应用程序。另一方面，Vite 将从您的程序代码中获取 ES Import 语法，并允许浏览器在发送 HTTP 请求之前分析每个导入。
进行更改主要是出于速度的原因。服务器会立即启动，因为它采用了对 JavaScript 组件的原生浏览器支持，而且速度更快。
组合 API 语法
Options API 用于创建元素状态和逻辑。 Composition API 是由 Vue3 推出的，作为其替代品。它只是 API 的集合，使我们能够使用导入的方法创建 Vue 元素而无需定义选项。
组合 API 包含以下 API：
Reactivity API - 例如，ref() 和 reactive()。它可以使用它直接构建反应状态、计算状态和观察者。
生命周期挂钩- 例如，onMounted() 和 onUnmounted()。我们可以使用生命周期挂钩来挂钩元素生命周期。
依赖注入- 例如，provide() 和 inject()。通过依赖注入可以使用带有反应性 API 的 Vue 的依赖注入系统。
使用组合 API 的优点
与 Options API 相比，使用 Composition API 的主要优点是：
- Vue3 不再需要元素来生成反应状态。
- 添加大量响应式属性时，Vue.js 元素中的设置可能会变得臃肿。因此，将这些反应变量抽象到单独的 javascript 文件中可能会很有用。
- 组合 API 的主要好处是它可以重用可组合方法形式的清晰、有效的逻辑。它解决了混入的所有问题，混入是选项 API 中重用逻辑的主要方法。
- 您可以使用完整的类型推断在 Composition API 中键入代码。
- 您在 Composition API 中编写的程序效率更高，变量的名称可以做得更小。这减少了开销。
- 您可以使用 Composition API 更好地共享您的程序代码。
松树
Pinia 是 Vue.js 的轻量级状态管理工具。它使我们能够在元素和页面之间共享状态。它使用 Vue3 中的新反应性概念创建了一个用户友好、完全类型化的状态管理框架。这是现在 Vue3 的新标准状态控制库。
Pinia 最初是为了研究 Vuex 的潜力。一直以来，Vuex 是 Vue 推荐的状态管理系统，但在 Vue3 中，Pania 是官方文档中推荐的状态管理系统。目前，Vuex 处于维护模式。尽管它继续运行，但不会添加任何新功能。对于新的应用程序，建议使用 Pinia。
为什么是皮尼亚？
Pinia 非常轻巧，只有 1KB。此外，它还与 Vue.js 开发工具集成，以改善您在 Vue 2 和 Vue3 中的编码体验。由于 Pinia 可以推断您的所有数据类型，因此它还可以为您提供完整且精确的 javascript 自动完成功能。 Pinia 在设计上也是模块化的，用户友好且可扩展。总体而言，Pania 看起来轻巧、简单且直接。它与处理元素非常相似，并且包含 Vue3 中动态编程所需的所有工具。
Vue 2 会被弃用吗？
Vue 2 的最后一次小更新是 Vue 2.7，它于 2022 年 7 月发布。Vue 2 目前处于维护模式。虽然不会发布额外的功能，但它仍会在 18 个月内获得重要的错误修复和安全补丁。到 2023 年底，Vue 2 将被弃用。
从 Vue 2 迁移
根据您的软件，如果您正在使用 Vue 2 处理一个非常大的项目，那么切换到 Vue3 可能不值得。如果尽管您尽最大努力进行优化，但效率问题仍然存在，请使用 Vue3。
是否要将应用程序迁移到 Vue3 取决于它的大小和复杂性。 Vue 2 中的大部分语法和技术与 Vue3 中的相同。但是，如果您想使用上面提到的一些更改，那么迁移将是一个更好的主意。
AppMaster 项目中的 Vue.js
AppMaster 平台使用 VueJS 框架，或者说是该框架的第三版，为我们的用户创建一个前端应用程序。 Vue 3 用于创建管理、面板和客户端门户，AppMaster studio 的整个界面实际上也是使用 VueJS 框架制作的。
我们使用一种称为微前端或前端微服务的特殊方法来快速高效地开发我们的产品；例如，每个数据模型编辑器和业务流程编辑器都是我们平台中完全独立的前端应用程序。从开发团队的角度来看，这使我们能够非常快速且独立地进行开发，从而提高了我们产品的整体速度。我们的客户可以使用我们的应用程序获得所有这些优势。
未来，除了 SPA 单页应用模式，我们还将增加 SSR（服务器端渲染）模式，让我们的客户不仅可以创建管理面板和自定义门户，还可以创建功能齐全的网站。高SEO优化。
关于无码
影响编码民主化的关键因素之一是无代码开发方法。如今，更多的人可以在没有编码的情况下访问编程。它使 Web 设计、 移动应用程序开发和响应式 Web 开发变得更简单。
AppMaster 是可用于自动创建源代码的应用程序之一。您可以随时查看和检查代码。使用 AppMaster，您可以选择使用计算机语言自定义项目信息。我们还允许人们根据需要导出代码。这是对您使用 AppMaster 处理的应用程序的完全控制和所有权的保证。
结论
如果您想更详细地了解 Vue3 与 Vue 2 的不同之处以及代码片段，您可以查看官方 Vue.js 文档。我们已经提到了您应该注意的大部分主要变化。如果您有兴趣使用此框架构建应用程序，请务必了解 Vue3 的更新。
