Vue:Vue的介绍以及组件剖析
阅读原文时间:2023年07月08日阅读:1

介绍

  现在,随着基于JavaScript的单页应用程序(SPA)和服务器端渲染(SSR)的兴起,可以用JavaScript编写整个前端应用程序,并整洁地管理和维护该应用程序的前端代码。诸如AngularReactVue之类的JavaScript框架允许开发人员使用JavaScript编写其整个前端应用程序,包括状态管理,页面路由支持和基于组件的体系结构等。如果像以前要编写40%以上的前端应用程序代码来获取数据和更新DOM,通常情况下,项目开发管理就变得很难控制了。

  这些框架要求你在组件和数据驱动方法方面重新考虑你的应用程序,以创建交互式用户界面。因此,你不再需要手动查找Dom元素并用数据更新它,而是将数据放在应用程序的前面和中心,让这些框架处理一些普通的任务,例如使DOM元素与数据保持同步。

  这些框架在开发时考虑了不同的理念,并且具有自己的学习曲线。例如,在这三者中,Angular的学习曲线最陡,而Vue则最容易学习和提高生产力。它们都使用基于组件的体系结构。这意味着,你可以在可管理的UI组件中分解整个前端应用程序,然后使用它们来构建应用程序。

  总而言之,基于组件的体系结构提供了一种方法,使你的应用程序精简而又无需重复代码,甚至无需重复代码,这使得开发团队易于理解代码。

  下面,我们将了解Vue的历史及其生态系统,包括Vue组件的解剖结构以及每个示例的概述。

Vue的历史

  Vue由Evan You创建,当时他在google上使用AngularJS 1.0应用程序在Google工作。他创建Vue作为渐进式JavaScript框架和Angular的高性能替代品。

  简而言之,术语“渐进式JavaScript框架”意味着你可以在现有Web应用程序中使用Vue,而不会遇到任何麻烦,并根据需要逐步使用框架功能。或者,你可以使用Vue和其他支持库构建整个前端。

  Vue(发音/vjuː/与View类似)是用于构建用户界面的渐进框架。它是从头开始设计的,可以逐步采用,并且可以根据不同的用例轻松地在库和框架之间扩展。它包含一个仅着眼于视图层的可访问的核心库,以及一个支持库的生态系统,可帮助你解决大型单页应用程序中的复杂性。—参考:链接

  在成立之初,Vue充分利用了其他库的最佳功能,例如模板语法、双向数据绑定和Angular的指令,React的虚拟DOM实现,所有这些都消除了进行任何繁琐设置的麻烦学习曲线以提高工作效率并减少遇到的烦恼。

  Vue的核心是使用响应式数据和更智能的依赖性跟踪来确定需要更新用户界面的哪一部分。通过使用虚拟DOM-Diff技术,Vue可以有效地创建要应用于DOM的最小数量的用户界面更改,然后甚至在眨眼之前就更新用户界面。

Vue生态系统

  Vue从成为完整的框架开始已经走了很长一段路。

  它具有丰富的官方核心库生态系统,强大的开发人员工具支持,大量的第三方插件,开发人员教程以及成熟的相关组件框架生态系统,例如VuetifyBootstrapVueElementQuasarNativeScript-Vue等等。你可能要根据应用程序的需求进行选择。

  

  Vue团队维护的一些核心库及其定义如下。

  1. Vue路由器https://router.vuejs.org/)Vue路由器是Vue.js的官方路由器。它与Vue.js核心深度集成,使使用Vue.js轻松构建单页应用程序变得轻而易举。
  2. Vuexhttps://vuex.vuejs.org/)Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行更改。
  3. Vue加载程序https://vue-loader.vuejs.org)Vue加载程序是用于Webpack的加载程序,可让你以称为单文件组件(SFC)的格式创作Vue组件。webpack和vue-loader的结合为你提供了一个现代,灵活且功能强大的前端工作流,用于编写Vue.js应用程序。
  4. Vue服务器渲染器https://ssr.vuejs.org/)Vue服务器渲染器有助于构建同构或通用JavaScript应用程序,该应用程序可在服务器端和客户端上运行,而大多数应用程序代码都是共享和重用的。
  5. Vue Test Utilshttps://vue-test-utils.vuejs.org/)Vue Test Utils是Vue.js的官方单元测试实用程序库。
  6. Vue Dev开发工具https://github.com/vuejs/vue-devtools)浏览器devtools扩展,用于调试Vue.js应用程序。
  7. Vue CLIhttps://cli.vuejs.org/)Vue CLI是用于快速Vue.js开发的完整系统。它旨在成为Vue生态系统的标准工具基线。它可以确保各种构建工具与合理的默认设置一起顺利运行,因此你可以专注于编写应用程序,而不必花费大量时间进行配置工作。

Vue组件剖析

  简要介绍典型的Vue单个文件组件(SFC)。准确来说,Vue单个文件组件包括三个部分:

  • 模板 Template

  • 脚本 Script

  • 样式 Style

      Vue单个文件组件是一个独立的用户界面,它具有自己的HTML标记,用于交互的脚本和用于表示的样式。

      在模板部分,你可以将HTML标记的代码以及在代码中的脚本部分中定义的任何数据变量或computed属性一起放置。

      你应该注意这里的HTML标记是否太长,这通常表明你正在做太多东西,并且必须考虑为此过长内容额外创建子组件。

      在脚本部分中,你可以根据需求定义任何本地数据,属性,计算属性,观察程序,方法,Vue生命周期钩子以及任何子组件的注册。

      最后,样式部分允许你定义组件样式,以使其可以使用普通CSS或使用Less,SCSS预处理器等来呈现。

Vue组件剖析

上面是Vue组件解剖的单页表示,这是骨架组件的要点。

1