自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(88)
  • 收藏
  • 关注

原创 Vue中生命周期函数有哪些?Vue中created和mounted生命周期函数有什么区别?谁更适合请求接口使用?为什么

beforeCreate: 在实例初始化之后、数据观测和事件配置之前被调用created: 在实例准备就绪后被调用。可以访问已设置的数据、计算属性、方法、DOM等beforeMount: 在挂载开始之前被调用。这时模板已编译完成,但尚未渲染到真实的DOM中mounted: 在挂载完成后被调用。可以访问到渲染后的DOM,常用于进行API调用或添加事件监听beforeUpdate: 在数据更新时、重新渲染之前被调用。可以在此修改数据,但不会触发附加的重新渲染updated: 在数据更新时、重新渲染完成后被调用。

2024-07-01 21:29:54 422 2

原创 Vue双向绑定如何实现?

总结起来,Vue的双向绑定原理是通过数据劫持和依赖收集来实现的。当数据发生变化时,Vue能够自动检测到变化并更新相关的视图部分,而当视图被修改时,Vue也能够将变化反映到数据上。这样就可以实现数据和视图的同步更新,提高了开发效率和用户体验。

2024-07-01 21:28:33 458 1

原创 如何理解Vue中的虚拟DOM和diff算法?

虚拟DOM:虚拟DOM是Vue的核心概念之一。在Vue中,当组件渲染时,它创建的不是真实的DOM节点,而是一个临时的、轻量级的JavaScript对象,我们称之为虚拟节点或VNode。这个VNode在内存中表示了真实的DOM节点应该是什么样子的。当数据改变时,Vue会创建新的VNode,然后与旧的VNode进行对比。diff算法:Vue使用了一种称为“深度优先遍历”的算法来比较两个VNode树。这个算法会遍历每个树的节点,并比较它们的属性和子节点。如果两个节点是相同的类型(例如都是元素节点),那

2024-07-01 21:27:09 229 1

原创 Http请求头有哪些?作用是什么?

1.通用头(General Headers) : 这部分头信息既可以用在请求,也可以用在响应是作为一个整体而不是特定资源与事务相关联。2.请求头 (Request Headers): 这部分头信息允许客户端传递关于自身的信息和希望的响应形式3.响应头(Response Headers) :这部分头信息由服务器和用于传递自身信息的响应。4.实体头(Entity Headers):这部分头信息定义被传送资源的信息,即可用于请求,也可用于响应Host: 客户机通过这个头告诉服务器,想访问的主机名lf-Modifi

2024-07-01 21:25:46 212 1

原创 为什么说Http协议是一种无状态协议?项目中如何解决这种无状态的问题

HTTP协议被称为无状态协议,主要是因为它不会在服务器端保留客户端的状态。这意味着,每次客户端向服务器发送请求时,服务器都会将其视为全新的请求,而不会了解之前的请求或响应。因此,HTTP协议无法在多个请求之间保持状态在项目中,解决这种无状态的问题主要有以下几种方式1使用Cookie: Cookie是一种在客户端存储状态信息的方式。服务器可以通过在响应中设置Cookie,将状态信息存储在客户端的浏览器中。然后,在后续的请求中客户端会自动将Cookie包含在请求头中以便服务器可以识别和跟踪用户的状态2使用Ses

2024-07-01 21:24:10 267 1

原创 vue的缺点是什么?优点是什么?

有一些限制和挑战,特别是在大型和复杂应用程序方面,开发者需要谨慎选择框架以满足项。是一个强大而灵活的前端框架,具有很多优点,适用于许多项目。是一个轻量级的框架,文件大小相对较小,因此加载速度快,适用于。允许开发者以自己的方式使用它,不强制使用一种特定的工程结构,有一个强大的生态系统,包括官方和第三方的插件、工具和扩展,样的框架,其社区规模较小,可能导致较少的资源和支持。在开发中非常灵活,但在处理复杂的大型应用程序时,框架,它有很多优点,但也有一些缺点。框架,它有很多优点,但也有一些缺点。

2024-07-01 18:42:57 256

原创 组件化开发 模块化开发 工程化开发

组件化开发、模块化开发和工程化开发是现代前端开发中的三个重要概念,它们有助于构建。组件化开发是一种将应用程序拆分成独立的、可重用的部件或组件的方法。模块化开发是一种将代码拆分成独立的模块或文件的方法,每个模块负责实现特定的功能或。工程化开发是一种将开发过程系统化和自动化的方法,以提高开发效率和质量。构建工具、自动化测试、代码规范、持续集成等技术和实践,以确保应用程序的可靠性和可。综合这些概念,组件化开发、模块化开发和工程化开发一起,有助于构建现代前端应用程。序,使其更易于开发、测试、维护和扩展。

2024-07-01 18:40:28 384 1

原创 写写node.js吧

Node.js采用了事件驱动、非阻塞I/O模型,使得它能够处理大量并发请求而不会阻塞线程,从而具有出色的性能表现。Node.js的设计简洁而轻量,启动速度快,内存占用低,适合构建轻量级、高效的应用程序。使用Node.js,开发者可以使用同一种语言(JavaScript)进行前后端开发,简化了开发人员的学习成本和代码维护成本。Node.js拥有丰富的第三方模块和库,可以轻松集成各种功能和服务,提高开发效率。

2024-06-30 20:06:55 554

原创 使用mongodb中的数据查询方法有哪些?

db.User.find({age: { $gt: 22 },education: "本科",gender: "女"}).limit(10).skip(0)db.user.find({name:/^张/})

2024-06-30 19:40:58 317

原创 Http? Http和HTTPS有什么区别

HTTP即超文本传输协议,是一种用于在互联网上传输数据的协议。HTTP是Web的基础,被Web浏览器和服务器用于彼此通信。它是在传输控制协议(TCP)的基础上运行的,TCP确保数据在服务器和客户端之间可靠地传输。HTTP的主要优点之一是它是一个简单而轻量级的协议,可以快速高效地传输数据。但是,它有几个缺点,使得它不适合传输敏感信息,例如信用卡详细信息、登录凭据和个人数据。这是因为它以明文形式传输数据,任何拦截数据的人都可以读取它。为了解决这个问题,开发了HTTPS,即安全超文本传输协议。HTTPS是

2024-06-30 19:38:07 385

原创 从输入URL到页面加载完成的流程是

如果DNS缓存中没有对应的记录,浏览器会向DNS服务器发送域名,将域名转换成IP地址,然后返回给浏览器。浏览器得到响应内容(如HTML代码),并开始渲染页面。通过TCP连接,向服务器发起HTTP请求。浏览器查找当前URL的DNS缓存记录。在浏览器地址栏输入URL并按下回车。根据IP建立TCP连接(三次握手)。服务器处理请求,将数据返回给浏览器。

2024-06-30 19:37:05 322

原创 Vue中$nextTick的作用及应用场景?

Vue中的nextTick用于处理数据动态变化后,DOM还未及时更新的问题,用nextTick就可以获取数据更新后最新DOM的变化。$nextTick是Vue的异步更新队列,用来知道什么时候DOM更新完成的。$nextTick的应用场景:1.有时需要根据数据动态的为页面某些dom元素添加事件,这就要求在dom元素渲染完毕时去设置,但是created与mounted函数执行时一般dom并没有渲染完毕,所以就会出现获取不到,添加不了事件的问题,这回就要用到$nextTick处理。2.在使用某个第

2024-06-30 19:33:18 390

原创 对Promise的理解?Prmose封装原生Ajax的思路

当一个异步操作成功完成时,Promise的状态会从pending变为fulfilled,并返回一个结果值。指定一个函数来处理HTTP请求的状态变化,当HTTP请求成功时,调用resolve()函数,并将响应数据作为参数传递给resolve()函数,当HTTP请求失败时,调用reject()函数,并将错误信息作为参数传递给reject()函数。将Promise对象返回给调用函数,以便调用函数可以使用Promise提供的方法来处理异步操作的结果。Promise是一个对象,它用于处理异步操作。

2024-06-30 19:31:38 299

原创 对BOM的理解?BOM的五大核心和作用是?

BOM是浏览器对象模型。BOM提供了独立于内容而与浏览器窗口进行交互的对象,使JavaScript有能力与浏览器"对话"。BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性:Window对象:浏览器窗口对象。所有JavaScript全局对象、函数以及变量均自动成为window对象的成员Navigator:浏览器对象。获取浏览器的相关信息。Screen:浏览器所处客户端的显示器屏幕对象。获取客户端显示器屏幕对象,以便获取屏幕的相关信息,如屏幕宽度、高度等。History:浏览器当

2024-06-30 19:30:53 249

原创 真实DOM和虚拟DOM的区别?为什么使用虚拟DOM

真实DOM和虚拟DOM的区别如下:体积:真实DOM体积庞大,操作起来比较消耗性能;虚拟DOM体积小,操作起来相对消耗性能少。操作:真实DOM可以直接更新HTML,消耗大量内存;虚拟DOM不能直接更新HTML,但可以映射真实DOM的JavaScript对象,操作起来相对简便。效率:真实DOM频繁的排版+重绘,效率较低;虚拟DOM能够有效避免真实DOM树的频繁更新,减少重绘和回流提高效率。跨平台:真实DOM无法跨平台;虚拟DOM具有跨平台的能力。使用虚拟DOM的原因:1.简单方便,如果使

2024-06-30 19:30:08 66

原创 Vue中封装一个组件的步骤是什么

文档化: 为你的组件提供清晰的文档,描述其用途、属性、用法等,以便其他开发人员能够理解和使用它。优化与维护: 持续优化和维护组件,处理反馈和 Bug,确保组件在项目中的稳定性和性能。编写模板: 在组件的模板部分,使用 Vue 的模板语法来定义组件的外观和结构。创建组件文件: 在你的项目中,创建一个新的 .vue 文件作为组件的容器。使用组件: 在需要使用该组件的地方,通过 import 语句引入组件。编写脚本: 在组件的脚本部分,定义组件的行为、逻辑和数据。样式化: 在组件的样式部分,添加组件的样式规则。

2024-06-30 19:28:20 249

原创 MVVM和MVC的区别是什么

视图和模型之间的通信方式不同:在 MVC 中,视图直接与控制器通信,并通过控制器与模型交互;而在 MVVM 中,视图通过数据绑定与 ViewModel 通信,并由 ViewModel 与模型交互。MVVM 引入了 ViewModel 层:ViewModel 是一个介于视图和模型之间的中间层,负责处理视图显示和用户输入的逻辑。数据绑定:MVVM 中的视图和 ViewModel 之间通过数据绑定实现双向通信,而在 MVC 中,视图和控制器之间只能通过事件监听和回调等方式进行单向通信。

2024-06-30 19:27:19 401

原创 Express是怎么管理路由的

Express管理路由的方式是通过Router对象进行管理,即使用Express提供的app对象的Router()方法创建路由器。路由器是一个独立的中间件处理函数,可以通过调用其get、post、put、delete等方法来注册路由,调用express.Router()方法创建了路由器,通过router.get()方法注册了GET请求的根路径路由,最后使用app.use()方法将路由器挂载到应用程序的根路径下。使用路由器可以将应用程序的路由拆分成多个模块或者文件,使得代码更加清晰和易于维护。

2024-06-30 19:15:18 393

原创 什么是回调函数

回调函数是一种特殊的函数,它作为参数传递给另一个函数,并在被调用函数执行完毕后被调用。回调函数的作用是将代码逻辑分离出来,使得代码更加模块化和可维护。提高程序的性能和效率。回调函数还可以实现代码的复用,因为它们可以被多个地方调用。回调函数的使用场景包括:1.事件处理:回调函数可以用于处理各种事件,例如鼠标点击、键盘输入、网络请求等。2.异步操作:回调函数可以用于异步操作,例如读取文件、发送邮件、下载文件等。3.数据处理:回调函数可以用于处理数据,例如对数组进行排序、过滤、映射等。4.插件

2024-06-30 19:14:27 155

原创 Npm是啥 它的作用有什么

npm是一个node的包管理仓库 ,也是一个网站 ,还是一条命令 包管理:Npm允许开发者在自己的项目中引入、安装、更新和删除第三方的软件包。 版本控制:Npm可以帮助开发者管理项目中所使用的软件包的版本。 脚本执行:Npm提供了一个脚本执行的功能,开发者可以在package.json文件中定义自定义的脚本命令。 构建和打包:Npm可以与其他构建工具(如Webpack、Gulp等)结合使用,帮助开发者构建和打包项目。

2024-06-30 19:12:16 321

原创 对Nodejs中的事件循环机制理解

在 Node.js 中,事件循环是实现非阻塞 I/O 操作的核心机制。事件循环允许 Node.js 在单线程中处理多个并发操作,同时保持高性能和低延迟。事件队列:所有的事件和回调函数都会被放入事件队列中,等待处理。事件循环:事件循环是一个持续运行的程序,用于监听并处理事件队列中的事件。观察者:观察者负责监听特定类型的事件,并将其回调函数添加到事件队列中。I/O 线程池:I/O 线程池负责处理非阻塞的 I/O 操作,例如文件读写、网络请求等

2024-06-30 19:11:13 320 1

原创 总结req对象的属性:

1.req.app:这是Express应用程序实例的一个引用。2.req.baseUrl:获取被挂载的路由实例URL路径。3.req.body:这是一个对象,包含POST请求参数。这样命名是因为POST请求参数在请求正文中传递,而不像查询字符串在URL中传递。为了使req.body可用,需要中间件能够解析请求正文内容类型。4.req.cookies:包含请求发送的cookie的对象。如果请求不包含cookie,则默认为。5.req.fresh:这是一个布尔值,表示请求是否是新鲜的,即客户端缓存是否有

2024-06-30 19:09:15 212 1

原创 请简单叙述Vue2和Vue3的区别和变化

Proxy API具有更好的性能和更广泛的功能,使得在Vue3中能够更好地追踪对象的动态属性和数组的变化。Vue 2 和 Vue 3 是 Vue.js 的两个主要版本,Vue 3 在基础架构和性能方面进行了显著的改进和优化,以提供更好的开发体验和性能表现。相比Vue2的选项式API,组合式API更加直观和易于理解,使得代码结构更清晰,也更容易进行单元测试。:Vue3在TypeScript方面的支持更加全面,并提供了更多的类型定义文件和工具,使得在使用TypeScript开发Vue应用变得更加轻松和可靠。

2024-06-29 11:55:49 160 1

原创 VUE路由的原理

Vue的路由原理是基于浏览器的 History API 或者 Hashchange 事件来实现的。 基于浏览器的 History API: Vue使用浏览器的 History API(pushState、replaceState 和 popstate)来实现路由。在这种模式下,URL 中的路径部分会被修改成对应的路由路径,但不会刷新页面。Vue通过创建一个Router实例来管理路由。在Router实例中,定义一组路由规则,每个规则包含一个路径和对应的组件。当用户在应用中触发路由跳转时,

2024-06-29 10:54:37 224 1

原创 bind,call,apply 区别?

方法创建一个新的函数,该函数会永久地绑定一个特定的上下文(this 值),并返回这个新函数。这个新函数可以稍后被调用,并且它的。不同的是,它接受一个参数数组,其中数组的元素将作为函数的参数传递给原函数。是要绑定到函数的上下文,而后面的参数是要传递给原函数的参数。是要绑定到函数的上下文,而后面的参数是要传递给原函数的参数。是要绑定到函数的上下文,而第二个参数是一个参数数组。创建一个新的函数,不会立即调用原函数,而。方法用于立即调用函数,并指定函数内部的。值,以及传递函数所需的参数列表。接受一个参数列表,而。

2024-06-29 10:53:16 121

原创 Unicode、UTF-8、UTF-16、UTF-32的区别

ASCII65536Unicode、UTF-8、UTF-16、UTF-32有什么区别?Unicode。

2024-06-27 21:38:38 799

原创 数组有哪些原生方法

数组和字符串的转换方法:toString()、toLocalString()、join() 其中 join() 方法可以指定转换为字符串时的分隔符。 数组尾部操作的方法 pop() 和 push(),push 方法可以传入多个参数。 数组首部操作的方法 shift() 和 unshift() 重排序的方法 reverse() 和 sort(),sort() 方法可以传入一个函数来进行比较,传入前后两个值,如果返回值为正数,则交换两个参数的位置。 数组连接的方法 concat() ,返回的是拼接好的数组

2024-06-27 21:37:18 89

原创 JavaScript脚本延迟加载的方式有哪些

延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。一般有以下几种方式: defer 属性:给 js 脚本添加 defer 属性,这个属性会让脚本的加载与文档的解析同步解析,然后在文档解析完成后再执行这个脚本文件,这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的,但是在一些浏览器中可能不是这样。 async 属性:给 js 脚本添加 async 属性,这个属性会使脚本异步加载,不会阻塞页面

2024-06-27 21:36:17 197

原创 对JSON的一点点理解

JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。在项目开发中,使用 JSON 作为前后端数据交换的方式。在前端通过将一个符合 JSON 格式的数据结构序列化为JSON 字符串,然后将它传递到后端,后端通过 JSON 格式的字符串解析后生成对应的数据结构,以此来实现前后端数据的一个传递。因为 JSON 的语法是基于 js 的,因此很容易将 JSON 和 js 中的对象弄混,但是应该注意的是 JSON 和 js 中的对象不是一回事,JSON 中对象格式

2024-06-27 21:28:27 158

原创 JavaScript有哪些内置对象

js 中的内置对象主要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象。一般经常用到的如全局变量值 NaN、undefined,全局函数如 parseInt()、parseFloat() 用来实例化对象的构造函数如 Date、Object 等,还有提供数学计算的单体内置对象如 Math 对象。(6)可索引的集合对象,这些对象表示按照索引值来排序的数据集合,包括数组和类型数组,以及类数组结构的对象。基本对象包括一般对象、函数对象和错误对象。

2024-06-27 21:26:45 201

原创 new操作符的实现原理

(4)判断函数的返回值类型,如果是值类型,返回创建的对象。如果是引用类型,就返回这个引用类型的对象。(3)让函数的 this 指向这个对象,执行构造函数的代码(为这个新对象添加属性)(2)设置原型,将对象的原型设置为函数的 prototype 对象。(1)首先创建了一个新的空对象。

2024-06-27 21:25:17 72 1

原创 箭头函数与普通函数的区别

对象obj的方法b是使用箭头函数定义的,这个函数中的this就永远指向它定义时所处的全局执行环境中的this,即便这个函数是作为对象obj的方法调用,this依旧指向Window对象。需要注意,定义对象的大括号。构造函数在new的步骤在上面已经说过了,实际上第二步就是将函数中的this指向该对象。但是由于箭头函数时没有自己的this的,且this指向外层的执行环境,且不能改变指向,所以不能当做构造函数使用。箭头函数不会创建自己的this, 所以它没有自己的this,它只会在自己作用域的上一层继承this。

2024-06-27 21:21:13 106 1

原创 let、const、var的区别

var声明的变量为全局变量,并且会将该变量添加为全局对象的属性,但是let和const不会。但const声明的变量是不允许改变指针的指向。var声明变量时,可以重复声明变量,后声明的同名变量会覆盖之前声明的遍历。包括,let和const具有块级作用域,var不存在块级作用域。var存在变量提升,let和const不存在变量提升,即在变量只能在声明之后使用,否在会报错。在变量声明时,var 和 let 可以不用设置初始值。在使用let、const命令声明变量之前,该变量都是不可用的。

2024-06-27 21:19:11 141

原创 null和undefined区别

undefined 在 JavaScript 中不是一个保留字,这意味着可以使用 undefined 来作为一个变量名,但是这样的做法是非常危险的,它会影响对 undefined 值的判断。当对这两种类型使用 typeof 进行判断时,Null 类型化会返回 “object”,这是一个历史遗留的问题。当使用双等号对两种类型的值进行比较时会返回 true,使用三个等号时会返回 false。一般变量声明了但还没有定义的时候会返回 undefined,null主要用于赋值给一些可能会返回对象的变量,作为初始化。

2024-06-27 21:16:47 124

原创 数据类型检测的方式有哪些

不同的对象类型调用toString方法时,根据原型链的知识,调用的是对应的重写之后的toString方法(function类型返回内容为函数体的字符串,Array类型返回元素组成的字符串…),而不会去调用Object上原型toString方法(返回对象的具体类型),所以采用obj.toString()不能得到其对象类型,只能将obj转换为字符串类型;因此,在想要得到对象的具体类型时,应该调用Object原型上的toString方法。有两个作用,一是判断数据的类型,二是对象实例通过。可以正确判断对象的类型,

2024-06-27 21:15:28 285

原创 对Flex布局的理解及其使用场景

flex布局是CSS3新增的一种布局方式,可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器,它的所有子元素都会成为它的项目。可以使用justify-content来指定元素在主轴上的排列方式,使用align-items来指定元素在交叉轴上的排列方式。对于容器中的项目,可以使用order属性来指定项目的排列顺序,还可以使用flex-grow来指定当排列空间有剩余的时候,项目的放大比例,还可以使用flex-shrink来指定当排列空间不足时,项目的缩小比例。

2024-06-27 15:34:45 321

原创 px、em、rem的区别及使用场景

三者的区别:使用场景:

2024-06-27 15:32:43 111

原创 常见的CSS布局单位

,当浏览器的宽度或者高度发生变化时,通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化,从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。是与视图窗口有关的单位,vw表示相对于视图窗口的宽度,vh表示相对于视图窗口高度,除了vw和vh外,还有vmin和vmax两个相关的单位。常用的布局单位包括像素(

2024-06-27 15:23:04 306

原创 CSS 优化和提高性能的方法有哪些

(5)尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素。(9)css雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用。(10)正确使用display的属性,由于display的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。(1)将具有相同属性的样式抽离出来,整合并通过class在页面中进行使用,提高css的可维护性。

2024-06-27 15:15:21 396

原创 替换元素的概念及计算规则

(4)如果“固有尺寸”含有固有的宽高比例,同时仅设置了宽度或仅设置了高度,则元素依然按照固有的宽高比例显示。(5)如果上面的条件都不符合,则最终宽度表现为300像素,高度为150像素。(1)如果没有CSS尺寸和HTML尺寸,则使用固有尺寸作为最终的宽高。通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。(2)如果没有CSS尺寸,则使用HTML尺寸作为最终的宽高。(6)内联替换元素和块级替换元素使用上面同一套尺寸计算规则。(3)如果有CSS尺寸,则最终尺寸由CSS属性决定。

2024-06-27 15:14:34 170

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除