自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 react18新特性

react 18版本的新特性

2023-09-14 11:17:27 403

原创 vue router实现的源码

vue router实现源码分析

2023-09-14 10:08:51 175

原创 前端鉴权的10种方式

前端鉴权的10种方式

2023-08-29 09:55:06 375

原创 手写-promise封装ajax请求

promise封装ajax请求

2023-08-23 15:12:10 122

原创 手写promise完整代码+测试代码

手写promise

2023-08-23 15:10:19 56

原创 手写面试题-数组排序方法

数组排序方法

2023-08-23 15:06:32 40

原创 手写面试题-定时器promise执行顺序

定时器和promise的执行顺序

2023-08-23 15:03:13 44

原创 手写一个promise方法

手写promise

2023-08-22 09:37:46 87

原创 promise封装ajax请求【代码】

【代码】promise封装ajax请求【代码】

2023-08-22 09:35:43 41

原创 实现bind call apply 函数【代码】

【代码】实现bind call apply 函数【代码】

2023-08-22 09:33:20 31

原创 当使用代理服务器时,如果路径中包含/api,重复的问题,怎么解决?

当使用代理服务器时,如果路径中包含/api,重复的问题可以通过修改代理配置来解决。具体的解决方法取决于你使用的代理服务器和代理客户端的设置。

2023-08-21 09:41:55 491

原创 redux-saga和redux-thunk的区别与使用场景?

redux-saga和redux-thunk的区别与使用场景?

2023-07-11 09:32:27 53

原创 如何做移动端适配的?

如何做移动端适配的?一、增加防止缩放的meta<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">加meta的原因防止手机页面模拟980像素宽度防止用户缩放页面(双击放大,两指缩放)二、什么是媒体查询

2023-07-11 09:32:13 45

原创 vuex和pinia区别?

Vuex Pinia

2023-07-11 09:31:48 358

原创 请解释Vue的虚拟DOM是如何工作的?

当vue检测到数据发生变化时,它会再次生成一个新的虚拟DOM树,并将两个虚拟DOM树进行比较,确定需要更新哪些DOM元素。具体来说,当开发者在Vue组件中改变数据时,vue会创建一个新的虚拟DOM树,并通过比较原始虚拟DOM树和新的虚拟DOM树之间的差异,找出需要真正更新的部分,然后只更新这些部分对应的DOM元素。这样,可以大量减少操作DOM的次数,从而提高了渲染的效率。vue的虚拟DOM是一种处理DOM更新时优化性能的方式,它能够避免直接修改DOM带来的昂贵的重排和重绘操作,从而提高应用程序的性能表现。

2023-07-11 09:31:18 45

原创 整理面试题更新(...ing)

响应式设计是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本;页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺寸,屏幕定向等)进行相应的响应和调整关于原理:基本原理是通过媒体查询(@media)查询检测不同的设备屏幕尺寸做处理,页面头部必须有meta声明viewport如何做?媒体查询百分比百分比布局缺陷:依赖于父元素的尺寸:百分比布局的子元素尺寸是相对于父元素的尺寸来计算的,因此,如果父元素的尺寸不稳定或无法确定,子元素的布局可能会受到影响。

2023-07-09 21:57:10 73

原创 webpack热更新的实现原理?

webpack的热更新又称热替换(Hot Module Replacement),缩写为HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。

2023-07-07 09:19:34 137

原创 vue3响应式原理的实现?

在访问响应式数据对象的属性时,Vue 3会将正在访问这个属性的地方收集起来,并建立一个依赖关系图。Vue 3中的响应式原理相较于Vue 2有了较大的改进。它能够在初始化时追踪到动态添加的属性,并且能够进行深层次的依赖追踪,而不仅限于对象的顶层属性。2. 当我们访问响应式数据对象的属性时,Proxy对象会拦截这个操作,并建立一个依赖关系,将这个属性和正在访问它的地方关联起来。3. 当我们修改响应式数据对象的属性时,Proxy对象同样会拦截这个操作,并通知所有依赖于这个属性的地方进行更新。

2023-07-07 08:26:32 132

原创 vue2的响应式原理怎么实现?

当一个组件中的数据被访问时,会触发对应的 getter,然后把该组件的 Watcher 添加到依赖列表中。当某个依赖的数据发生变化时,会触发对应的 setter,然后通知依赖列表中的所有 Watcher 执行更新操作。只有在初始化时存在的属性才会被转换为响应式属性,新添加的属性或删除的属性不会被响应式监听。当一个属性被读取时,会触发 getter,然后把对应的依赖 (Watcher) 添加到依赖列表中。当数据发生变化时,相关的组件会自动更新,并且更新只发生在需要更新的组件上,提高了性能。

2023-07-07 08:25:52 102

原创 防抖和节流的区别?如何实现?应用场景有哪些?

节流:n秒内只允许一次,若在n秒内重复触发,只有一次生效防抖:n秒后在执行该事件,若在n秒内被重复触发,则重新计时。

2023-06-08 16:36:52 68

原创 如何理解原型和原型链?原型的使用场景有哪些?些

每一个JavaScript对象都有一个原型对象,这些原型构成了一条指向object原型对象的链条,被称为“原型链”。当使用new运算符创建一个新的实例时,它将会从原型上继承所有属性和方法,包括那些定义的父类函数的prototype对象上的属性和方法。每个JavaScript函数都有一个默认的prototype属性,它是一个空对象,用于存放该函数的实例共享的属性和方法。总之,理解原型和原型链不仅有助于更好地理解JavaScript的特性,也能使我们写出更清晰、可复用的代码。

2023-06-08 15:26:16 298

原创 什么是宏任务和微任务、说说你对event Loop的理解?

总体来说,事件循环机制保证了 Javascript 的单线程特性,同时也保证了异步代码的渐进式执行,避免了阻塞程序运行的问题。通过掌握宏任务、微任务和事件循环的机制,我们可以更好地理解Javascript异步编程的本质,并写出更高效、可维护的代码。在Javascript中,宏任务(macro-task)和微任务(micro-task)是异步代码执行的两种方式。当浏览器遇到异步代码时,它会将其添加到任务队列中,并等待一段时间后再执行。这里的‘一段时间’就是发生事件后的延迟时间。

2023-06-08 15:12:42 148

原创 Js中数据类型判断的方法以及区别都有哪些?

这些方法的使用场景不同,具体用哪种方法取决于你的需要。但总的来说,typeof运算符和instanceof关键字通常用于基本类型和对象类型之间的区分,而Object.prototype.toString.call()方法则可用于更细粒度的类型检查。在JavaScript中,有很多方法可以用来识别不同的数据类型。

2023-06-08 14:52:39 56

原创 reactive与ref的区别?

reactive与ref的区别?从定义数据方面:ref通常用来定义基本类型数据reactive用来定义对象(或者数组)类型数据ref也可以用来定义对象或者数组类型的数据,内部会通过reactive转为代理对象从原理方面:ref通过object.defineProperty()的get和set实现数据代理reactive使用proxy实现数据代理,并且通过reflect操作源对象内部的数据从使用方面:ref操作数据需要.value,template模板中不需要。reactive不需要.v

2023-06-08 09:09:49 63

原创 toref和torefs区别?

主要在于torefs可以将一个对象的多个属性同时转换为响应式对象,方便我们一次性地对多个属性实现双向绑定;而toref只能将一个值转换为一个响应式对象。注意事项:使用refsVal.foo.value量访问属性foo的值,而不是refsVal.foo。当这个对象发生更改时,相关联的组件会自动重新渲染。对refVal赋新值时,可以直接赋值。它将一个普通的JavaScript对象或原始值转换为一个响应式对象(Ref对象)。是将一个对象中的所有属性都转换成响应式对象(Ref对象)。

2023-05-26 17:01:59 494

原创 什么是响应式设计?响应式设计的基本原理是什么?如何做?

响应式设计(Responsive Design)是一种网页设计技术,其目的是要使网站或应用程序在不同尺寸、不同屏幕以及各种设备上都有良好的用户体验。这种方式可以让一个web应用程序自适应于不同的平台、分辨率和屏幕大小。响应式设计的基本原理是将所有的页面元素随页面尺寸的变化进行调整,并改变它们的布局方式以满足设备的特征和需求。通过媒体查询等前端技术,可以根据不同的设备尺寸,加载不同的CSS样式文件,以达到适配不同的设备、屏幕效果。

2023-05-26 16:54:31 417

原创 元素水平垂直居中的方法有哪些?如果元素不定宽高呢?

元素水平垂直居中的方法

2023-05-26 16:35:49 156

原创 请叙述Vue2和Vue3数据响应式原理的不同

vue2的数据响应式原理主要是利用了object.defineProperty()的getter和setter方法,将所有的属性转化为getter/setter形式,在属性被访问或修改时触发更新函数。这种新的方式非常灵活和高效,加速了对象的访问和修改效率,并且不受限于对象属性数量。而且也可以对数组数据进行精准监听。在使用上,vue2基于全局的options API(data、props、watch等)配置组件模板中的数据,vue3基于setup()函数将数据逻辑分离出来,方便组合式API的使用。

2023-05-26 16:28:02 134

原创 Vue3中自定义指令生命周期的变化及含义?

其中,vnode表示虚拟节点,prevVnode表示更新前的虚拟节点。在beforeUpdate和updated这两个钩子函数中,可以通过比较vnode和prevVnode来判断指令绑定的属性是否被更新。在Vue2中,自定义指令的生命周期钩子函数有两个参数:el和binding。总的来说,Vue3中自定义指令生命周期的变化主要是为了与Vue3的组合式API更加契合,提高了代码的可读性和可维护性。Vue3中自定义指令的生命周期发生了一些变化,大体上分为两类:钩子函数名称的变化和钩子函数参数的变化。

2023-05-26 11:32:18 415

原创 Vue3中的组合式Api有哪些? 和Vue2的Options Api又什么不同?

Vue3中的组合式API包括:setup函数、ref 和 reactive 函数、computed属性、watchEffect函数、生命周期钩子函数等。总的来说,Vue3的组合式API更加灵活和易于维护,能够帮助开发人员更好地组织组件代码,并提高代码复用性。

2023-05-26 11:28:06 279

原创 vue3组合式API与vue2选项API

Vue 3 主推的是组合式 API,相对于 Vue 2 的选项 API,有以下几个不同点:

2023-05-26 11:04:17 230

原创 vue2watch和vue3watch的区别

除了以上变化外,Vue 3 的 watch() 还支持调试工具,并且与 Vue 2 工作方式相比更易于优化代码的性能。vue3watch 和 vue2watch 在 API 层面有几个不同点。

2023-05-26 10:58:46 515

原创 watch 和 watchEffect区别

所以,当需要侦听一个指定的数据源,并在数据源变化时指定回调函数时,就可以使用 watch()。当需要自动侦听其内部使用的响应式数据,无需指定具体数据源,让 Vue 自动控制更新时就可以选择 watchEffect()。watch() 和 watchEffect() 都是 Vue 3.x 中提供的 API,主要用于观察 Vue 组件中数据的变化,并在响应式数据变化时执行指定的代码。

2023-05-26 10:46:34 282

原创 vue2和vue3的区别?

性能:vue3在内部做了许多性能优化,使用proxy替换defineProperty,使其更快,更高效。响应式系统:重写了响应式系统,使其更简单,可预测的,易于维护。同时还支持了更好的类型推断和TS的支持更好的TypeScript支持:vue3对TypeScript的支持得到大幅度提升,包括API和类型声明composition API:composition API是vue3中的一个新的组合式API,它可以让开发者以一种类似函数的方式组织组件的逻辑或代码。与vue2中的options API相比,

2023-05-26 10:05:21 29

原创 Vue是如何实现实现权限管理的,按钮级别权限如何实现?

vue是一个前端框架,其实现权限管理主要是通过路由拦截和条件渲染等方式来实现。2.在前端实现前端路由,并在路由守卫中获取用户权限列表和当期路由的权限要求,两者进行匹配,根据匹配结果决定是否渲染或跳转到页面。1.在后台服务中,根据不同的用户角色,生成对应的权限列表,如可访问菜单、按钮等。

2023-05-24 17:14:32 710

原创 Vue的自定义指令钩子函数有哪些?用自定义指令做过什么?

vue的自定义指令可以通过注册全局指令或在组件内部组件注册局部指令来使用。自定义指令提供了一种灵活的方式,可以扩展vue的行为以满足各种特殊需求。鼠标拖动元素改变位置大小。实现无线滚动加载数据。

2023-05-24 17:06:36 403

原创 什么是严格模式,限制都有哪些?

严格模式是JavaScript中的一种执行模式,它在ECMAScript5中被引入,并在之后成为了默认模式。在严格模式下,JavaScript将严格执行一些规则和限制,以减少一些常见的编程错误。

2023-05-24 16:58:25 304

原创 promise和async/await的区别是什么?

promise和async/await都是JavaScript中用于处理异步操作的机制。

2023-05-24 16:52:01 1316

原创 浏览器的内核都有哪些,什么区别?

这些内核之间的差异在于它们实现规范、渲染方式和性能等方面的不同,因此不同内核的浏览器在显示效果和渲染速度上可能会存在差异或兼容性问题。对于网站开发中来说,了解各种内核的特点和区别,可以更好地进行网页设计和开发,并提高用户体验。

2023-05-24 16:43:58 437

原创 对flex布局的了解,使用场景?常用属性?

Flex布局是一种比传统CSS布局更加灵活的页面布局方式,可以在不依赖任何框架或工具库的情况下,实现各种复杂的布局需求,例如伸缩性内容、定位、排版等。

2023-05-24 16:35:33 163

空空如也

空空如也

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

TA关注的人

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