m0_63540064的博客

原创 vue2和vue3有什么区别

4. Composition API：Vue.js 3 引入了一个新的 API，称为 Composition API，这使得组件逻辑更易于组织和重用。总之，Vue.js 3 在性能、体积、TypeScript 支持、API 和响应式处理等方面都有显著的改进和优化，是一个更加现代化和强大的前端框架。2. 更小的体积：Vue.js 3 的代码体积比 Vue.js 2 要小得多，这意味着更快的加载时间和更少的资源消耗。5. 更好的响应式处理：Vue.js 3 中的响应式系统得到了更新，提高了性能和可维护性。

原创 vue2 和 vue3 diff算法有什么不同

3. Vue.js 3 的响应式系统改进了对数组数据的处理：Vue.js 3 中的响应式系统使用 Proxy 实现，大幅度优化了对数组数据的追踪和处理效率。综上所述，Vue.js 3 在 diff 算法方面的改进主要包括使用静态标记优化 diff 过程、优化了 unkeyed 列表的处理和改进响应式系统对数组数据的支持，这些都使得 Vue.js 3 相对于 Vue.js 2 更加高效。1. Vue.js 3 使用了静态标记：Vue.js 3 中的编译器可以根据模板中静态节点和动态节点的数量来生成一些标记。

原创 什么是重绘 什么是回流 怎么解决

而回流是指元素的布局或几何属性发生变化时，浏览器需要重新计算元素的位置和大小，然后对整个页面进行重新布局的操作。避免频繁访问DOM属性：由于访问DOM属性会导致页面的重新计算和重新绘制，因此应该尽量避免频繁访问DOM属性，可以将其缓存到变量中减少访问次数。使用transform属性：使用transform属性可以改变元素的位置和尺寸，而不会引起页面的重新布局，从而减少回流操作。减少重排和重绘：尽量避免修改多个元素的样式或者同时对多个元素进行DOM操作，将其合并成一个操作，从而减少重排和重绘的次数。

原创 css新特性

Grid布局：Grid布局是CSS中最新的布局方式，它可以实现更复杂的布局效果，比如多列、多行等。Grid布局使用网格来定义布局和定位，使得页面布局更加灵活和易于控制。自定义属性：CSS变量是CSS中非常有用的新特性之一，它可以定义全局或局部的变量，并且可以在样式表中的任何位置调用这些变量，从而简化代码并提高可维护性。CSS网格线：CSS网格线是CSS中用于定义网格布局的新特性，可以通过定义行和列的数量以及起始和结束位置来实现各种灵活的布局效果，比如多列、多行等。

原创 什么是promise?有哪些方法 怎么用

finally() 方法：finally() 方法用于无论Promise对象最终的状态如何，总是执行的回调函数，并返回一个新的Promise对象。then() 方法：then() 方法用于指定Promise对象的成功和失败时的回调函数，并返回一个新的Promise对象。catch() 方法：catch() 方法用于指定Promise对象发生错误时的回调函数，并返回一个新的Promise对象。Promise是ES6中新增的一种异步编程解决方案，它可以轻松处理由异步操作返回的结果，避免了回调地狱的情况。

原创 性能优化~

路由懒加载：利用Vue Router提供的路由懒加载功能，可以将页面代码分割成小块，按需加载，提高页面的首屏展示速度。压缩文件大小：通过压缩CSS、JavaScript等文件的大小，可以减少网络传输的数据量，提高页面的加载速度。优化图片：压缩图片、选择正确的图片格式、使用延迟加载图片等方法可以有效减小页面图片的大小，提高页面加载速度。异步加载代码：通过异步加载JavaScript代码，可以减少页面的加载时间，提高页面的响应速度。

原创 关于BFC

BFC包含了一个独立的渲染区域，内部的元素布局不会影响到外部元素的布局。并且在BFC中，所有的盒子按照规定的方式进行排列和定位，避免了一些常见的布局问题。BFC主要用于解决盒子在布局时出现的一些问题，比如浮动元素引起的父元素高度塌陷、两个相邻元素间的间距无法消除等问题。BFC内部的元素在垂直方向上会按照规定的方式进行排列和定位，从而避免了一些常见的布局问题。BFC内部的元素在布局时会形成一个独立的空间，避免了margin重叠的问题。BFC可以包含浮动元素，在BFC中浮动元素将不会影响到外部元素的布局。

原创 es6里面解决异步的方法

Promise.all()方法：Promise.all()方法接收一个由Promise对象组成的数组作为参数，返回一个新的Promise对象，当数组中所有的Promise对象都完成时，返回的Promise对象才完成，并且将所有Promise对象的结果按数组顺序返回。Promise对象：Promise是一种处理异步操作的方式，它代表一个可能还没有完成的异步操作，当异步操作完成时，Promise会返回一个结果或者错误信息。通过使用装饰器模式，可以将异步操作和原函数解耦，使得代码更加灵活和易于扩展。

原创 防抖和节流

防抖的实现方法是通过设置一个定时器，在规定时间内如果再次触发了该事件，则清除之前的计时器，并重新开始计时，直到规定时间内没有再次触发事件，才执行对应的操作。节流：在一段时间内只执行一次操作。比如用户不断地滚动页面，我们可以设置一定时间间隔，每隔一段时间再执行一次处理滚动事件的函数，这就是节流。节流的实现方法是记录上一次函数执行的时间戳，当当前时间戳与上一次的时间戳相差大于指定的时间间隔时，就执行对应的操作。防抖和节流都是用于控制函数执行频率的技术，可以避免一些不必要的操作，提升页面的性能。

原创 vue性能优化方案，解决首页加载慢

减少重绘和回流：对于频繁变化样式的元素，尽可能使用transform代替改变元素的位置和尺寸，避免浏览器的重绘和回流操作。路由懒加载：利用Vue Router提供的路由懒加载功能，可将页面代码分割成小块，按需加载，提高页面的首屏展示速度。使用异步组件：将页面不必要的组件代码延迟到页面需要渲染时再加载，避免了不必要的网络请求和资源浪费。代码分割：将项目中的代码按照功能模块进行拆分，减少不必要的代码加载时间，并且可以更好地管理项目。缓存组件：对于多次使用的组件，可以进行缓存处理，减少重新渲染的时间。

原创 什么是回调地狱以及如何解决回调地狱问题

async/await：async/await 是基于 Promise 的语法糖，通过 async 函数和 await 关键字来消除回调函数嵌套，使代码看起来更像同步代码。Generator 函数：Generator 函数是 ES6 中提供的另一种异步编程方式，可以通过 yield 关键字来实现暂停和恢复功能，使代码看起来像同步代码。Promise：Promise 是 ES6 中新增的一种异步编程方式，通过链式调用 then 方法来避免回调函数的嵌套，使代码更加简洁易读。

原创 怎么解决跨域

JSONP方案和ajax没有任何关系，是通过script标签的src属性实现，因此JSONP方案只支持get请求，并且兼容性好，几乎所有浏览器都支持。实现原理：在全局定义一个函数，将函数名以get传参的方式写入到script标签的src属性中(如下图所示)，后端返回函数名以及参数，全局定义的函数就会自动调用，形参会接收后端传过来的参数。 2.跨域的解决方案-代理转发代理转发的原理：在前端服务和后端接口服务之间架设一个中间代理服务，它的地址保持和前端服务一致，那么：代理服务和前端服务之间由于协议域名端口

原创 seo优化

最常见最简单的，也就是创建一个XML文件（sitemap.xml），在其中列出网站中的网址以及冠宇每个网址的其它数据（上次更新时间、更改频率，以及相对于网址上其他网址的重要程度为何）以便搜索引擎可以更加智能的抓取网址。内链：从自己网站的一个页面指向另一个页面，通过内链让网站内部形成网状结构，通过内链，让蜘蛛的广度和深度达到最大化。title标签相当于网站的名片，他会直接显示在搜索结果中，一个好的标题可以为网站带来流量，从而提高网站的排名。通过外链提升网站的权重，提高网站流量。

原创 闭包的理解

一个函数访问了此函数的父级及父级以上的作用域中的变量，这个函数就是闭包。本质上，js中的每个函数都是个闭包，因为每个函数都可以访问全局变量。一般理解为函数嵌套函数 访问函数内部的变量让变量始终保持在内存中 可以减少全局变量的定义，避免全局变量的污染能够读取函数内部的变量在内存中维护一个变量，可以用做缓存 造成内存泄露:变量驻留内存，会影响性能，在ie中，可能造成内存泄漏，解决办法︰使用完变量，在赋值给该变量null造成性能损失∶闭包涉及跨作用域的访问，所以会导致性能损失.解决办法:涉及到跨作用域的变量

原创 let. var. const区别?

var是ES5提出的，let和const是ES6提出的const声明的是常量，必须赋值一旦声明必须际值,不能使用null占位，声明后不能再修改，如果声明的是复合类型数据，可以憾改其属性let和var声明的是变量，声明后可修改，声明时可以不赋值var允许重复声明变量，后边会覆盖前面的变量。let和const在同一作用域不允许重复声明变量，会报错var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined.let和const不存在变量提升var不存在块级作用域。

原创 对作用域和作用域链是如何理解的?

限制某个变量只能在某个区域内有效,分为全局作用域和局部作用域，因此根据作用域中变量的划分，分为全局变量和局部变量 1、局作用域︰代码中任何地方都能访问到的变量2、局部作用域:函数内可访问的变量3、es6中的块级作用域:通过let或const声明，所声明的变量在指定块中被访问 作用域链;变量取值是在创建这个变量的函数的作用域中取值。但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，查找过程形成的链条就叫做作用域链

原创 js中常用的数组

注意:当然在实际开发中，有些方法的用法是可以参考手册的。以上就是对数组方法的认识。

原创 loca、Storage和sessionStorage的区别?

注意:不同浏览器无法共享localStorage或sessionstorage中的信息。

原创 对响应式布局的理解

同一页面在不同屏幕尺寸下有不同的布局，使一个网站、app能够兼容多个终端，最终目的其实也是为了适配1、流式布局,也叫百分比布局，将页面的宽度设置成百分比，根据窗口的宽度来进行伸缩2、栅格系统(Grid System)将一个页面划分为几个主要区域，定义这些区域的大小、位置、层次等关系3、媒体查询@media，@media由媒体类型和一个或多个检测条件表达式组成4、viewport适配将px转换为rem或者vw，让页面自适应了面对不同分辨率设备灵活性强，能够快捷解决多设备显示适应问题兼容各种设备工作量大，效率低

原创 渐进增强和优雅降级的理解（使用场景：项目升级）

渐进增强：对于低版本浏览器进行构建页面，完成基本功能，然后再针对高级浏览器进行效果，交互、追加功能达到更好的体验优雅降级：构建站点的完整功能，然后针对浏览器进行兼容。比如用css3构建了一个应用做完后逐步针对各大浏览器进行hack，使其可以在低版本浏览器上正常浏览渐进增强是从一个能够起作用的初始版本开始，不断扩充，以适应各种环境的要求优雅降级是从复杂开始，逐步向下兼容，最终能适应各种浏览器和平台

原创 react面试题

虚拟DOM是真实DOM在内存中的表示，ul的表示形式保存在内存中，并且与实际的DOM同步，这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤，整个过程被称为调和高阶组件(HOC)是接受一个组件并返回一个新组件的函数。基本上，这是一个模式，是从 React 的组合特性中衍生出来的，称其为纯组件，因为它们可以接受任何动态提供的子组件，但不会修改或复制输入组件中的任何行为HOC 可以用于以下许多用例代码重用、逻辑和引导抽象渲染劫持state 抽象和操作props 处理。

原创 Ant Design分页多少条

Ant Design分页多少条。

原创 前端面试题

HOC（Higher Order Component）是一种在 React 中进行组件复用的技术，通过将一个组件作为参数传递给另一个函数或组件，返回一个新的增强版组件。HOC 可以对现有的 React 组件进行包装，添加新的功能或修改现有的行为，同时还可以使组件代码更具可读性和复用性。使用 HOC 可以实现以下好处：1. 代码复用：可以将公共的逻辑抽象为 HOC，避免在多个组件中重复编写相同的代码。2. 动态生成组件：可以根据不同的需求动态生成不同的组件，提高组件的灵活性和可扩展性。

原创 vite搭建脚手架

原创 react搭建脚手架

1.搭建脚手架：npx create-react-app 需要搭建的项目名称。4.启动项目 npm start。3.cd到你的项目名称。