2024前端开发 - 2/3进阶篇 - 核心框架学习

FunctionCat函数猫

已于 2024-07-20 15:54:31 修改

阅读量947

点赞数 27

文章标签：学习

于 2024-01-26 00:03:43 首次发布

本文链接：https://blog.csdn.net/Cat0926/article/details/135856405

版权

本文详细介绍了2024年前端开发中的Vue、React和Angular三大主流框架，涵盖了架构理念、项目结构、状态管理、组件化、数据绑定、路由管理以及性能优化等内容，帮助开发者全面了解和选择合适的框架进行学习和实践。

摘要由CSDN通过智能技术生成

学习系列目录

热门话题系列

热门模版系列

在前端开发的学习过程中，框架的理解与应用是至关重要的一环。在本阶段，我们将以Vue、React和Angular这三个主流前端框架为主线，从不同的维度出发，深入了解和比较这些框架的特性和应用。

1. 架构理念

不同的框架有着不同的架构理念，这决定着框架的设计理念和使用方法。

框架/库	架构理念	详细信息
Vue	MVVM架构	Vue采用数据驱动和组件化的思想，实现了Model-View-ViewModel 的架构模式。
React	UI= f(state)	React的理念是"UI是状态的函数"，通过组件化的方式来构建用户界面。React
Angular	MVW架构	Angular是一个完整的前端解决方案，实现了Model-View-Whatever的架构模式，Whatever表示Angular并不限制你的代码结构和组织方式。

典型的项目结构

Vue 项目结构

/my-vue-app
├── README.md             # 项目说明文档
├── package.json          # 项目的配置信息
├── package-lock.json 
├── .gitignore            # Git 忽略的目录或者文件
├── public                # 静态资源目录
│   ├── favicon.ico
│   └── index.html
├── node_modules          # Node.js 模块存放的目录
├── src                   # 源代码目录
│   ├── main.js           # 应用启动，加载组件、模块
│   ├── App.vue           # 主应用程序组件
│   ├── components        # 组件目录
│   │   └── HelloWorld.vue
│   ├── router            # 路由配置目录
│   │   └── index.js
│   ├── assets            # 静态资源(图片/样式)目录
│   ├── store             # Vuex状态管理器目录
│   │   └── index.js
│   ├── views             # 视图组件目录
│   └── utils             # 工具函数库
└── tests                 # 测试文件目录

React 项目结构

/my-react-app
├── README.md
├── package.json
├── package-lock.json
├── .gitignore
├── node_modules
├── public
│   ├── index.html
│   └── favicon.ico
└── src
    ├── index.js               # 应用入口
    ├── App.js                 # App组件
    ├── components             # 组件目录
    │   ├── Header.js
    │   └── Footer.js
    ├── assets                 # 静态资源(图片/样式)目录
    ├── utils                  # 工具函数库
    ├── services               # 服务(常用于http请求)
    ├── tests                  # 测试文件目录
    ├── contexts               # React Contexts
    ├── hooks                  # 自定义Hooks
    └── reducers               # Reducers for use with React useReducer Hook

Angular 项目结构

/my-angular-app
├── README.md
├── package.json
├── package-lock.json
├── .gitignore
├── node_modules
├── angular.json            # Angular CLI 配置文件
├── tsconfig.json           # TypeScript 配置文件
├── src
│   ├── index.html
│   ├── main.ts             # 应用入口
│   ├── styles.css          # 全局样式
│   ├── app                 # 应用主体目录
│   │   ├── app.component.ts    # 主组件
│   │   ├── app.component.html  # 主组件模板
│   │   ├── app.component.css   # 主组件样式
│   │   ├── app.module.ts       # 主模块
│   │   ├── components          # 组件目录
│   │   ├── services            # 服务目录
│   │   ├── assets              # 静态资源(图片/样式)目录
│   │   ├── utils               # 工具函数库
│   │   └── tests               # 测试文件目录
│   └── environments
└── e2e                    # e2e 测试文件目录

以上是Vue, React, Angular三个前端框架项目的基本目录结构，实际项目根据需要可能会有所不同或更复杂，比如可能会有更多的模块、组件、服务等目录，还可能包括配置文件、脚本文件等。

状态管理

框架名称	概念介绍	官方链接	历史由来	适用场景	优缺点	学习的Git仓库
Vue.js	Vue使用Vuex作为其官方的状态管理库，它提供了一个集中式存储来管理所有的应用状态。	Vuex	Vuex作为Vue的官方状态管理库，于2016年发布。	适用于需要状态管理的中大型Vue.js应用。	优点：易于集成和开始，提供详细的状态管理功能。缺点：对于小型项目可能会显得过于复杂。	vuex-examples, awesome-vuex
React.js	React使用Redux和MobX作为其主流的状态管理库，它们提供了一个集中式存储来管理所有的应用状态。	Redux, MobX	Redux和MobX分别于2015年和2016年发布，并被React社区广泛接受。	适用于需要状态管理的中大型React.js应用。	优点：提供了灵活且强大的状态管理解决方案。缺点：学习曲线较陡峭，配置较复杂。	awesome-redux, mobx-awesome
Angular.js	Angular使用NgRx和Akita作为其主流的状态管理库，它们提供了一个集中式存储来管理所有的应用状态。	NgRx, Akita	NgRx和Akita分别于2016年和2018年发布，并被Angular社区广泛接受。	适用于需要状态管理的中大型Angular应用。	优点：提供了灵活且强大的状态管理解决方案。缺点：需要熟练掌握RxJS，学习曲线较陡峭。	ngrx-awesome, akita-playground

组件化

框架名称	概念介绍	官方链接	历史由来	适用场景	优缺点	学习的Git仓库
Vue.js	Vue通过.vue文件实现组件化，提供了一种简便的方式来创建可复用的组件。此外，Vue社区还有一些流行的UI组件库，如Vuetify，Element UI等。	Vue Components, Vuetify, Element UI	Vue的组件化功能从其首次发布（2014年）起就是框架的核心特性。Vuetify和Element UI分别于2016年和2017年发布，并被Vue社区广泛接受。	适用于需要进行组件化开发的所有Vue.js应用。	优点：易于理解和实现，对初学者友好。缺点：需要额外的配置和工具来支持.vue文件。	awesome-vue, vue-component-examples
React.js	React使用JSX来实现组件化，提供了一种声明式的方式来定义组件。此外，React社区还有一些流行的UI组件库，如Material-UI，Ant Design等。	React Components, Material-UI, Ant Design	React的组件化功能是在其首次发布（2013年）时就已经存在的。Material-UI和Ant Design分别于2014年和2015年发布，并被React社区广泛接受。	适用于需要进行组件化开发的所有React.js应用。	优点：提供了丰富的组件化技术和工具，社区活跃。缺点：JSX语法可能需要一定的学习时间。	awesome-react, react-component-examples
Angular.js	Angular通过.ts文件实现组件化，提供了一种类似于面向对象的方式来定义组件。此外，Angular社区还有一些流行的UI组件库，如Angular Material，NG-ZORRO等。	Angular Components, Angular Material, NG-ZORRO	Angular的组件化功能是从其首次发布（2010年）时就已经存在的。Angular Material和NG-ZORRO分别于2016年和2017年发布，并被Angular社区广泛接受。	适用于需要进行组件化开发的所有Angular应用。	优点：提供了完全集成的组件化环境，官方支持。缺点：需要熟练掌握TypeScript，学习曲线较陡峭。	awesome-angular, angular-component-examples

路由管理

框架名称	概念介绍	官方链接	历史由来	适用场景	优缺点	学习的Git仓库
Vue.js	Vue使用Vue Router作为其官方的路由管理库，它提供了一种声明式的路由映射方式。	Vue Router	Vue Router作为Vue的官方路由库，于2016年发布。	适用于需要路由管理的所有Vue.js应用。	优点：易于集成和开始，提供详细的路由管理功能。缺点：对于非Vue项目不适用。	vue-router-examples, awesome-vue-router
React.js	React使用React Router和Reach Router作为其主流的路由管理库，它们提供了一种声明式的路由映射方式。	React Router, Reach Router	React Router和Reach Router分别于2014年和2018年发布，并被React社区广泛接受。	适用于需要路由管理的所有React.js应用。	优点：提供了灵活且强大的路由管理解决方案。缺点：需要一定的时间来学习这些库的使用。	react-router-examples, reach-router-examples
Angular.js	Angular使用Angular Router作为其官方的路由管理库，它提供了一种声明式的路由映射方式。	Angular Router	Angular Router作为Angular的官方路由库，于2016年发布。	适用于需要路由管理的所有Angular应用。	优点：提供了完全集成的路由管理环境，官方支持。缺点：需要熟练掌握Angular的路由系统，学习曲线较陡峭。	angular-router-examples, awesome-angular

数据绑定

框架名称	概念介绍	官方链接	历史由来	适用场景	优缺点	学习的Git仓库
Vue.js	Vue提供了一种声明式的数据绑定方式，支持单向和双向数据绑定。	Vue Data Binding	Vue的数据绑定功能从其首次发布（2014年）起就是框架的核心特性。	适用于需要数据绑定的所有Vue.js应用。	优点：易于理解和实现，对初学者友好。缺点：对于非Vue项目不适用。	vue-binding-examples, awesome-vue
React.js	React提供了一种声明式的数据绑定方式，它主要支持单向数据流。	React Data Binding	React的数据绑定功能是在其首次发布（2013年）时就已经存在的。	适用于需要数据绑定的所有React.js应用。	优点：数据流清晰，易于追踪数据的变化。缺点：双向数据绑定需要额外的代码。	react-binding-examples, awesome-react
Angular.js	Angular提供了一种声明式的数据绑定方式，支持单向和双向数据绑定。	Angular Data Binding	Angular的数据绑定功能是从其首次发布（2010年）时就已经存在的。	适用于需要数据绑定的所有Angular应用。	优点：提供了完全集成的数据绑定环境，官方支持。缺点：需要熟练掌握Angular的数据绑定系统，学习曲线较陡峭。	angular-binding-examples, awesome-angular

性能优化

框架名称	概念介绍	官方链接	历史由来	适用场景	优缺点	学习的Git仓库
Vue.js	Vue提供了异步渲染，懒加载等性能优化技术。	Vue Performance	Vue的性能优化功能从其首次发布（2014年）起就是框架的核心特性之一。	适用于需要进行性能优化的所有Vue.js应用。	优点：易于理解和实现，对初学者友好。缺点：对于非Vue项目不适用。	vue-perf-devtool, vue-lazyload
React.js	React提供了虚拟DOM，懒加载，代码分割等性能优化技术。	React Performance	React的性能优化功能是在其首次发布（2013年）时就已经存在的。	适用于需要进行性能优化的所有React.js应用。	优点：提供了多种性能优化技术和工具。缺点：可能需要额外的库如React.lazy来实现某些功能。	react-perf-devtool, react-lazyload
Angular.js	Angular提供了Ahead-of-Time (AOT) 编译，懒加载等性能优化技术。	Angular Performance	Angular的性能优化功能是从其2.0版本（2016年）开始引入的。	适用于需要进行性能优化的所有Angular应用。	优点：提供了多种性能优化技术和工具。缺点：需要熟练掌握这些技术才能发挥其最大功效。	angular-performance-checklist, ngx-lazy-load

测试

框架名称	概念介绍	官方链接	历史由来	适用场景	优缺点	学习的Git仓库
Vue.js	Vue提供了官方的单元测试工具库Vue Test Utils，以及E2E测试解决方案Cypress。	Vue Test Utils, Cypress	Vue Test Utils作为Vue的官方测试库，于2017年发布。Cypress作为E2E测试解决方案，于2014年发布并被Vue社区广泛接受。	适用于需要进行单元测试和E2E测试的所有Vue.js应用。	优点：易于集成和使用，提供详细的测试功能。缺点：对于非Vue项目不适用。	vue-testing-handbook, cypress-vue-unit-test
React.js	React使用Jest作为其官方的测试框架，Enzyme和Testing Library作为其官方推荐的React组件测试库，Cypress用于E2E测试。	Jest, Enzyme, Testing Library, Cypress	Jest作为Facebook的开源项目，于2016年发布并被React社区广泛接受。Enzyme和Testing Library分别于2016年和2018年发布，并被React社区广泛接受。Cypress作为E2E测试解决方案，于2014年发布并被React社区广泛接受。	适用于需要进行单元测试和E2E测试的所有React.js应用。	优点：提供了丰富的测试工具和库，社区活跃。缺点：可能需要一定的时间来学习这些工具和库的使用。	jest-awesome-list, react-testing-examples, cypress-example-recipes
Angular.js	Angular使用Jasmine作为其官方的测试框架，Protractor作为其官方的E2E测试框架。	Jasmine, Protractor	Jasmine作为行为驱动的开源测试框架，于2010年发布并被Angular社区广泛接受。Protractor作为Angular的官方E2E测试框架，于2013年发布。	适用于需要进行单元测试和E2E测试的所有Angular应用。	优点：提供了完全集成的测试环境，官方支持。缺点：Protractor只适用于Angular应用，对新手不友好。	angular-testing-recipes, protractor-example