自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 Object.assign用法

如果只是想将两个或多个对象的属性合并到一起,不改变原有对象的属性,可以用一个空的对象作为target对象。假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。简单来说,就是Object.assign()是对象的静态方法,可以用来复制对象的可枚举属性到目标对象,利用这个特性可以实现对象属性的合并。没有同名的属性会直接复制到目标对象上,同名的属性后面的属性值会覆盖前面的同名属性值。1、Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象,继承属性和不可枚举属性是不能拷贝的。

2024-03-06 11:39:19 721

原创 Object.keys()的用法

Object.keys()方法会返回一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用for…in循环遍历该对象时返回的顺序一致,如果对象的键-值都不可枚举,那么将返回由键组成的数组。let person = {name:“张三”,age:25,address:“深圳”,getName:function(){}}let person = {name:“张三”,age:25,address:“深圳”,getName:function(){}}参数:要返回其枚举自身属性的对象。

2024-03-06 11:24:00 371

原创 JavaScript的内存管理与垃圾回收

JavaScript提供了高效的内存管理机制,它的垃圾回收功能是自动的。在我们创建新对象、函数、原始类型和变量时,所有这些编程元素都会占用内存。那么JavaScript是如何管理这些元素并在它们不再使用时清理它们的呢?在本节中,我们将讨论JavaScript中的内存管理的所有内部过程。我们将关注以下主题:JavaScript中的内存生命周期JavaScript中的内存分配当内存不再使用时的释放JavaScript的垃圾回收JavaScript垃圾回收中的引用概念标记-清除算法。

2024-02-23 15:07:24 789

原创 axios是如何实现的(源码解析)

该文件创建了一个axios实例,并且导出,所以我们import axios from 'axios'引入的就是该实例,可以直接使用,不需要再new Axios({...})这样写。从上面的文件可以看出,axios扩展了Axios的原型方法和Axios实例的属性,所以接下来要重点看Axios的类里有什么内容。在阅读源码之前,先大概了解一下axios实例的属性和请求整体流程,带着这些概念,阅读源码可以轻松不少!下图是axios的请求流程,其实相当简单,先了解这个流程,看源码的时候就会有方向。

2024-02-23 14:46:54 594 1

原创 esbuild的使用及配置

esbuild是一个「JavaScript」打包和压缩工具,核心目标是开创构建工具性能的新时代, 同时创建一个易于使用的现代构建工具。

2024-02-21 14:45:45 929

原创 ESbuild 简介

ESbuild 文档:Esbuild 有命令行 ,js 调用, go 调用三种使用方式。这里主要讲利用 js 调用的方式。

2024-02-21 12:01:24 1492

原创 Commonjs 和 Es Module详解

今天我们来深度分析一下Commonjs和Es Module,希望通过本文的学习,能够让大家彻底明白Commonjs和Es Module原理,能够一次性搞定面试中遇到的大部分有关Commonjs和Es Module的问题。1 Commonjs 和 Es Module 有什么区别?2 Commonjs 如何解决的循环引用问题?3 既然有了exports,为何又出了?既生瑜,何生亮?4require模块查找机制?5 Es Module 如何解决循环引用问题?6这种写法为何无效?7 关于。

2024-02-19 14:55:17 1741 1

原创 前端基础面试题

主要分成两部分:渲染引擎(Layout Engine或Rendering Engine)和js引擎渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。js引擎:解析和执行JavaScript来实现网页的动态效果边距重叠:两个box如果都设置了边距,那么在垂直方向上,两个box的边距会发生重叠,以绝对值大的那个为最终结果显示在页面上。

2024-02-19 14:28:28 864 1

原创 Vue2 基础面试题

model: {},props: {},

2024-02-19 14:12:54 840 1

原创 Vue3 基础面试题

Vue3 提供事件缓存对象,当开启 cacheHandler 会自动生成一个内联函数,同时生成一个静态节点,当事件再次触发时,只需从缓存中调用即可。Vue3 对于不参与更新的元素,做静态提升,只会被创建一次,在渲染时直接复用即可。依赖预构建主要做了什么呢?场景:比如一个列表,一刷新就需要加载数据,在数据未加载之前会显示 loading,加载完之后在显示列表数据。实现不是一次性监听的,这里深度监听是在 get 中处理的,什么时候用到什么时候处理(惰性)。,页面能显示内容,但内容不是响应式的。

2024-02-19 11:14:44 893 1

原创 Pinia 与 Vuex 使用区别

解决方案:首页优化时会考虑到这个场景,一般处理方案是去做 vuex 的按需加载,beforeCreate 时,可以去判断当前页需要加载哪些 store,之后利用 vuex store 实例上的 registerModule 进行动态注册。pinia 在打包时会检查引用依赖,当首页用到 app store,打包只会把用到的 store 和页面合并输出 1 个 js chunk,其他 2 个 store 不会耦合在其中。Pinia 不再需要一个主要的 Store,是一个平面的结构,可创建不同的 Store。

2024-02-19 09:58:02 862 1

原创 query和params传参区别

动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效。传递参数 – this.$router.push({name: ’ 路由的name ', params: {key: value}})query传递显示参数(url那里),params传递不显示参数,参数在请求体内,params相对于query来说较安全一点。参数取值 – this.$route.params.key。params传参只能用name来引入路由。

2024-02-19 09:43:08 391 1

原创 前端构建效率优化之路

本文不会详细描述 Webpack 的构建原理,我们只需要大致知道,Webpack 的构建流程,主要时间花费在递归遍历各个入口文件,并基于入口文件不断寻找依赖逐个编译再递归处理的过程,每次递归都需要经历 String->AST->String 的流程,然后通过不同的 loader 处理一些字符串或者执行一些 JavaScript 脚本,由于 NodeJS 单线程的特性以及语言本身的效率限制,Webpack 构建慢一直成为它饱受诟病的原因。阶段的优化,涉及到环境准备,镜像拉取,依赖的安装。

2024-02-18 11:55:15 895

原创 js实现树形数据转成扁平数据&&扁平数据转成树形数据

利用递归的方法循环树形数组,当遇到有children的对象再次调用递归函数循环children数组,每次循环的数据放入一个提前声明好的数组里,等所有递归函数执行完,这个数组即是想要得到的扁平数据数组。示例1。

2024-02-01 11:52:07 355 1

原创 HTTP协议超级详解

HyperTextTransferProtocol,缩写:HTTP)是一种用于分布式、协作式和超媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。HTTP的发展是由蒂姆·伯纳斯-李于1989年在欧洲核子研究组织(CERN)所发起。

2024-02-01 11:10:54 792 1

原创 前端常见跨域解决方案(全)

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。

2024-02-01 11:01:53 1003 1

原创 为什么Vue3 中应该使用 Ref 而不是 Reactive

解释是这样的:如果目标对象与源对象具有相同的键(属性名),则目标对象中的属性将被源对象中的属性覆盖,后面的源对象的属性将类似地覆盖前面的源对象的同名属性。时,如果不当使用,可能导致响应性失效,带来一些困扰。这种操作类似于深拷贝,不再共享同一内存地址,而是只是字面量的赋值,对该变量的赋值不会影响原来对象的属性值。用于将对象转换为响应式数据,可以直接访问和修改属性,适用于复杂的嵌套对象和数组。在一些情况下会失去响应,这可能导致数据回显失去响应(数据改了,DOM 没更新)。作为声明响应式状态的主要API。

2024-02-01 10:36:26 932 1

原创 鸿蒙开发之ArkTS基础知识

ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简称TS)的基础上,匹配了鸿蒙的ArkUI框架,扩展了声明式UI、状态管理等相应的能力,让开发者以更简洁、更自然的方式开发跨端应用。了解ArkTS之前,我们需要先了解下ArkTS、TypeScript和JavaScript之间的关系。JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

2024-02-01 10:31:24 890 1

原创 vue路由守卫简明操作笔记

路由守卫,简单理解来说就是,当用户要进行一些操作时,我需要用户的一些信息或数据或行为,我判断过后,才会同意用户进行操作,说到这里,我想大家心里都或多或少有点理解了吧,官方一点的解释就是进行操作的鉴权,当操作与之条件匹配时,操作成功,当操作与之不匹配时,操作终止,作用就是是对路由进行权限控制。meta的作用:路由元信息说白了就是通过meta对象中的一些属性,用于判断当前路由是否具有某一条件,便于进行判断和处理。路由meta属性,简单来说就是路由元信息,也就是每个路由身上携带的信息,属性名、属性值自己定义。

2024-01-29 15:47:58 334

原创 Vue路由简明实操笔记

路由1、作用:1)理解: 一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理2)前端路由:key是路径,value是组件3)作用:设定访问路径,并将路径和组件映射起来(就是用于局部刷新页面,不需要请求服务器来切换页面)2、安装路由:vue 版本为 2.x,建议 vue-router 安装 3.x 版本。vue 版本为 3.x,建议 vue-router 安装 4.x 版本。项目下package.json查看 vue 版本。

2024-01-29 15:37:49 288

原创 vite.config.js详细配置

当浏览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大缩短了编译时间,当项目越大,文件越多时,vite的开发时优势越明显。使用复杂度介于Parcel和Webpack的中间,只是暴露了极少数的配置项和plugin接口,既不会像Parcel一样配置不灵活,又不会像Webpack一样需要了解庞大的loader、plugin生态,灵活适中、复杂度适中。webpack是基于模块化的打包(构建)工具,通过一个入口文件递归出所有模块的依赖关系,经过一系列的过程(压缩,合并),最终生成运行的代码。

2024-01-29 14:57:45 1378

原创 ElementUi多选框表格,翻页或搜索选中有记忆功能保持默认选中

ElementUi多选框表格,翻页或搜索选中有记忆功能保持默认选中

2022-04-11 11:03:23 1702

原创 vue+file-saver+xlsx导出table为excel

vue+file-saver+xlsx导出table为excel

2022-03-23 11:48:31 939

空空如也

空空如也

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

TA关注的人

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