了解JQ、React、vue用途和工作原理

最新推荐文章于 2025-04-26 15:58:54 发布

广东蜡笔小新

最新推荐文章于 2025-04-26 15:58:54 发布

阅读量346

点赞数

文章标签： react.js vue.js jquery

本文链接：https://blog.youkuaiyun.com/m0_56223760/article/details/134550206

版权

用途：jQuery是JavaScript的程序库之一，许多JavaScript能实现的交互特效，jQuery也能完美实现，比如：

工作原理：

(1). $=jQuery=new jQuery

在这里插入图片描述

(2). jq子对象其实是一个类数组对象，可保存找到的多个DOM元素对象

(3). 对jq子对象调用简化版函数，会被自动翻译为对应的原生DOM的方法和属性。

所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。

jQuery中的this、e、e.target等，和DOM中的完全一样

用途：React是一个用于构建用户界面的JavaScript库。它的主要用途是帮助开发者构建高效、可维护、可复用的用户界面

构建用户界面： React主要用于构建交互式的用户界面。你可以使用React创建复杂的单页面应用（SPA）或构建组件化的界面。
组件化开发： React提倡组件化开发，将用户界面拆分成小而独立的组件。每个组件都有自己的状态（state）和属性（props），使得代码更易于理解、维护和复用。
虚拟DOM： React引入了虚拟DOM的概念，通过在内存中构建虚拟DOM树来提高性能。它能够最小化DOM操作，只更新必要的部分，从而提升页面渲染效率。
单向数据流： React通过单向数据流的思想来管理数据的流向。数据自顶向下流动，任何状态的改变都会触发组件的重新渲染。
生命周期管理： React组件有生命周期方法，允许你在组件不同阶段执行特定的代码。例如，可以在组件挂载、更新或卸载时执行相应的逻辑。
状态管理： React提供了一种简单的状态管理机制，通过setState方法来更新组件的状态。这使得组件能够根据数据的变化进行重新渲染

工作原理：

组件声明：React提供了一种声明式的方式来描述用户界面的状态变化。开发人员通过定义组件的属性（props）和状态（state）来描述UI的当前状态和行为
虚拟DOM：使用虚拟DOM来表示UI的状态变化，而不是直接操作真实DOM。
渲染：当组件的props或state发生变化时，React会重新渲染虚拟DOM。React会通过比较前后的虚拟DOM的差异，确定哪些部分需要更新
更新：当确定了需要更新的部分，React会使用高效的算法将变化应用到真实DOM上，实现UI的更新。React会尽可能地复用现有的DOM节点，以提高性能
事件处理：React通过将事件处理程序附加到DOM节点上，来处理用户的交互行为。当发生事件时，React会调用对应的事件处理函数，并根据需要更新组件的状态或属性

用途：Vue.js（通常简称为Vue）是一款用于构建用户界面的渐进式JavaScript框架。它专注于视图层，为开发者提供了一种更容易理解和集成到其他库和项目中的方式。Vue的主要用途包括：

构建用户界面： Vue被设计用于构建交互式的用户界面。它通过使用声明式的模板语法，将数据和DOM绑定在一起，使开发者能够轻松地管理和渲染用户界面。
单页面应用程序（SPA）： Vue可以用于创建单页面应用程序，其中整个应用在一个页面中加载，而页面的内容在用户与应用程序交互时进行动态更新，而不需要重新加载整个页面。
组件化开发： Vue支持组件化开发，允许开发者将应用拆分成小而独立的组件。这样的模块化设计使得代码更易于理解、维护和重用。
响应式数据绑定： Vue使用双向数据绑定机制，当数据发生变化时，视图会自动更新，反之亦然。这使得开发者能够更容易地追踪和管理应用程序的状态。
轻量级： Vue的核心库相对较小，使其易于学习和集成到现有项目中。Vue还有一些官方的插件和第三方库，可以根据需要选择性地引入。
路由管理： Vue可以与Vue Router配合使用，提供客户端路由功能，允许开发者通过路由控制应用程序的导航。
状态管理： 对于大型应用程序，Vue可以与Vuex一起使用，提供集中式的状态管理。这有助于在组件之间共享和管理状态。

工作原理：

初始化阶段：
- Vue实例化：创建Vue实例时，Vue会进行初始化，设置数据响应式、编译模板等。
- 数据初始化：Vue会通过劫持数据的getter和setter来追踪数据的变化。
编译阶段：
- 模板编译：Vue将模板转换为渲染函数，生成虚拟DOM。
- AST（Abstract Syntax Tree）生成：将模板解析成AST，进一步生成渲染函数。
首次渲染：
- 创建虚拟DOM：根据渲染函数创建虚拟DOM树。
- 渲染真实DOM：通过虚拟DOM生成真实DOM并挂载到页面上。
响应式系统：
- 数据变化：当数据发生变化时，Vue会通过setter通知依赖更新。
- 依赖追踪：Vue会追踪依赖关系，建立数据与视图的联系。
更新阶段：
- 数据变化：当数据发生变化时，Vue会触发更新过程。
- 虚拟DOM更新：Vue通过虚拟DOM比对算法计算出变化，并更新虚拟DOM。
- 最小化DOM操作：Vue通过比对前后虚拟DOM树的差异，最小化对真实DOM的操作，提高性能。
- 真实DOM更新：根据差异，更新真实DOM。
组件化：
- 组件更新：每个组件都有自己的虚拟DOM和状态，只有当组件的状态变化时，才会重新渲染该组件，而不影响其他组件。
- 组件通信：组件之间通过props和events进行通信，形成组件树。
销毁阶段：
- 组件销毁：当组件不再需要时，Vue会触发销毁过程，清理事件监听、定时器等资源。