m0_63596578的博客

原创 Flexbox 属性总结

本文总结了Flex布局的核心知识点：1）容器属性控制主轴/交叉轴排列方式，包括flex-direction、flex-wrap等；2）项目属性调节子元素行为，如flex-grow分配剩余空间、order调整视觉顺序；3）提供5个常用布局公式，如居中、自适应等；4）指出常见误区，如align-content需多行生效、order不改变DOM顺序等。重点强调了flex属性的简写规则和优先级关系，以及如何避免文本溢出等问题。全文系统梳理了Flex布局的属性和应用技巧，并附实用示例和注意事项。

原创 flexbox 核心属性：flex-grow、flex-shrink、flex-basis

本文介绍了Flexbox布局中的三个核心属性：flex-grow（增长因子）、flex-shrink（收缩因子）和flex-basis（初始大小）。flex-grow控制项目在剩余空间中的放大比例，默认0不放大；flex-shrink决定空间不足时的收缩比例，默认1可收缩；flex-basis设置项目初始尺寸，默认auto。文章还介绍了flex简写属性的常见用法，包括flex:1（等分空间）、flex:0 0 auto（固定尺寸）等，并提供了等分布局、固定侧边栏和响应式卡片等实际应用示例。

原创 Vue 插槽：从基础到进阶

Vue插槽使用指南：默认插槽用于基础内容插入，具名插槽实现多位置内容分发，作用域插槽则支持子组件向父组件传递数据。文章详细介绍了三种插槽的语法、使用场景和最佳实践，包括默认值设置、动态插槽名等技巧，并指出了常见误区。默认插槽适合简单容器，具名插槽适用于复杂布局，作用域插槽则用于高度自定义的渲染场景。开发时应遵循语义化命名、提供默认值等原则，以实现更灵活、可维护的组件设计。

原创 Vue 的异步更新机制和 $nextTick 的用法

Vue采用异步更新机制优化性能，将多次数据变更合并为一次DOM更新。通过$nextTick可以在DOM更新后执行回调，Vue2使用this.$nextTick，Vue3提供nextTick函数支持回调或async/await。典型应用场景包括获取更新后的DOM状态、表单验证后滚动、弹窗自动聚焦和动画触发。底层基于微任务队列实现，优先使用Promise。建议仅在需要操作DOM时使用，Vue3推荐async/await语法，避免在回调中修改数据以防循环。理解这一机制能有效解决DOM更新相关的问题。

原创 微任务和宏任务

JavaScript的事件循环机制通过微任务和宏任务实现异步编程。微任务（如Promise.then）优先级高于宏任务（如setTimeout），会在当前宏任务执行完毕后立即执行。事件循环顺序为：同步代码→清空微任务队列→执行下一个宏任务。理解二者的区别有助于优化性能，避免递归微任务导致的页面卡死，并正确处理Vue的nextTick等场景。关键差异在于执行时机（微任务本轮循环结束前执行，宏任务下一轮循环执行）和队列处理方式（微任务一次性清空，宏任务每次执行一个）。

原创 非父子通信： provide和inject

Vue中的provide/inject机制允许跨层级组件通信，无需逐层传递props。Vue2中provide需用函数形式，但默认不具响应式；Vue3通过ref/reactive实现自动响应。示例显示：Vue2后代组件无法自动更新，Vue3则能实时同步变化。注意陷阱：避免直接修改inject数据（建议用readonly）、确保provide响应式对象。该方案适合深层组件通信，但全局状态仍推荐Pinia等专用库。

原创 localStorage用法详解

本文介绍了浏览器本地存储localStorage的核心特性与应用要点：1. 基本特性：5MB存储空间，同步API，仅支持字符串存储，需JSON转换对象；2. 主要API：setItem/getItem/removeItem/clear/key五种原生方法；3. 实用封装：包括JSON存取、TTL过期控制、跨标签页监听（storage事件）；4. 使用边界：不适合敏感数据、大文件存储，与sessionStorage的区别在于生命周期；5. 注意事项：隐私模式兼容、容量检测、性能优化及常见问题处理。最后提供了容

原创 vue2中父子组件通信

Vue2父子组件通信的三种原生方式：1)父→子通过props单向传递数据；2)子→父通过$emit触发自定义事件；3)父组件通过ref直接访问子组件实例。props支持数组简写和对象完整声明两种形式，可通过v-bind一次性传递整个配置对象。这些方法涵盖了Vue2中组件间通信的基本场景，其中props推荐使用对象形式进行类型校验和默认值设置，确保数据传递的可靠性。

原创 vertical-align: middle

CSS的vertical-align属性用于控制行内元素和表格单元格的垂直对齐方式。对行内元素而言，middle值会使元素中心与父元素基线对齐，而非整个父元素高度居中；对表格单元格则实现真正的垂直居中。常见误区是误用该属性实现块级元素居中，正确做法应使用Flexbox或Grid布局。属性支持多种对齐方式，包括baseline、top、bottom等关键字，以及长度和百分比值。表格单元格专用值包括top、middle和bottom。需注意该属性仅适用于行内元素和表格单元格，不能用于块级元素垂直居中。

原创 一文吃透：「空间换时间」的 Map 拍平技巧

文章摘要：针对大规模树形结构数据处理，提出将树形结构拍平为一维Map的核心方法。通过buildIdMap函数实现泛型化处理，支持任意键名和节点类型，将树节点以键值对形式存储，实现O(1)复杂度查询。该方法适用于部门树、菜单权限、级联选择等场景，显著提升搜索、回显、校验等操作的性能。对比传统深度遍历，2000节点下查询性能提升明显，初始化仅需一次遍历，后续操作均为哈希查询。文中还展示了Map结构在快速获取父链、自动去重等方面的扩展应用价值。

原创 树形结构渲染 + 选择（Vue3 + ElementPlus）

本文介绍了使用Element Plus的el-tree-select组件处理树形部门选择功能的方法。核心内容包括：1）处理两种后端数据格式（平铺数组需转树形，树形数组可直接使用）；2）提供listToTree工具函数将平铺数组转为树形结构；3）详细说明el-tree-select组件的四个关键属性（v-model、data、props、change）；4）实现选中节点后获取节点名称的回显逻辑；5）处理编辑场景的默认值设置；6）表单校验和清空操作。文章配有完整可运行的miniDemo代码，帮助开发者快速实现树

原创 前端接口联调速查手册

这篇文章提供了一套处理接口数据的标准化流程，分为4个步骤：1）打印查看接口返回数据；2）将完整数据包直接塞入表格；3）对照文档逐一匹配字段；4）将参数抽为变量并统一请求函数。作者强调通过"变量+统一函数"的模式，可以实现任何参数切换时自动更新表格数据，并提供了可直接复用的代码模板。文章最后总结了"先打印→整包塞→对字段→抽变量→统一函数"的五步口诀，帮助开发者快速掌握接口数据处理方法。

原创 前端面试十四之webpack和vite有什么区别

在前端中，构建工具的选择往往决定了开发体验和效率。webpack和vite是两种广泛使用的构建工具。

原创 HTTP缓存：强缓存和协商缓存

原创 find数组方法详解||Vue3 + uni-app + Wot Design（wd-picker）使用自定义插槽内容写一个下拉选择器

本文介绍了基于Vue3+uni-app+WotDesign实现的下拉选择器组件。核心功能是选择市场数据，包含以下特点： 使用wd-picker组件，支持自定义触发区样式 通过计算属性拼接"全部市场"选项 选中后触发onMarketChange回调更新数据 使用Array.find方法实现回显标签查找 组件要求数据格式为{label,value}数组 详细讲解了Array.find方法的使用场景和参数特性 该组件实现了美观的UI展示和灵活的数据处理能力，适用于需要下拉选择的业务场景。

原创 uniapp中echarts点击失效问题解决

在（尤其是场景，如webview或app-plus）中，使用ECharts时经常会遇到的问题。

原创 前端面试十三之vue3基础axios

本文介绍了XMLHttpRequest(XHR)的基本使用和Promise改造方法，以及环境变量配置和Axios的使用。主要内容包括：1. XHR基础用法，通过创建对象、配置请求、发送请求和处理响应四个步骤实现异步通信；2. 将XHR封装为Promise形式，便于使用async/await进行异步处理；3. 使用Vite环境变量配置文件区分开发和生产环境；4. Axios的实例创建、请求拦截器和响应拦截器的配置方法，实现统一请求处理和错误管理。这些技术可以帮助开发者更高效地处理HTTP请求和响应。

原创 前端面试十二之vue3基础

Vue3响应式数据管理与模板交互摘要：Vue3提供了ref和reactive两种响应式数据创建方式，ref适用于基本类型数据，通过.value访问；reactive用于对象类型，直接访问属性。模板交互方面，通过v-bind(:)实现属性绑定，v-on(@)实现事件绑定。表单处理使用v-model实现双向绑定，支持.lazy、.number等修饰符。计算属性(computed)根据响应式数据自动缓存计算结果，可设置getter/setter实现读写控制。这些特性共同构成了Vue3响应式系统的核心，使开发者能够

原创 前端面试十一之TS

TypeScript（TS）是JavaScript的超集，通过静态类型检查提升代码健壮性。文章对比了type和interface的用法与区别：type适合定义复杂类型别名，interface更适合对象类型和类实现。还介绍了函数类型、字面量与nullish类型、泛型应用，以及类语法（继承、访问修饰符、抽象类等）。TypeScript的类型系统与ES6+支持使其成为大型项目开发的优选方案。

原创 js-cookie详细介绍

js-cookie是一个轻量级的JavaScript库（约5KB），用于简化浏览器cookie操作。它提供Cookies.set()、get()和remove()等易用API，支持设置过期时间、路径等属性。兼容IE6+等主流浏览器，支持CommonJS/ES6模块化。典型用法包括设置7天有效期的cookie（expires:7）、读取cookie值（返回undefined表示不存在）和删除特定路径cookie。通过withAttributes()可配置默认属性，如domain和path。

原创 Vuex 中context 对象

Vuex中的context对象提供了访问store核心功能的能力，包含state、commit、getters和dispatch等属性。开发者可以通过解构context对象来简化代码，例如将{commit}解构出来直接使用。这种解构方式不仅减少代码冗余，还能提升代码可读性和维护性，是Vuex开发中常用的优化技巧。

原创 前端面试十之vuex

Vuex看这一篇就够了

原创 前端面试九之Vue Router

Vue.js官方路由管理器vue-router详解：本文全面介绍了vue-router的核心功能，包括基本路由配置（安装、初始化、历史模式）、动态导入实现代码分割、默认路由与404页面处理、嵌套路由结构设计。重点讲解了动态路由的实现方案：通过后端API获取路由数据（包含路径、组件信息），结合动态import()实现角色权限控制；使用localStorage缓存路由配置以优化性能；提供路由跳转的两种方式（router-link标签和编程式导航）。文章还涵盖了嵌套路由、路由重置等高级用法，为构建复杂SPA应用提

原创 前端面试八之map

JavaScript中的Map是一种高效的键值对集合，比普通对象更强大。它支持任意类型的键，保持插入顺序，提供动态大小和多种遍历方式。常用方法包括set()、get()、has()、delete()等。与Object相比，Map在处理非字符串键、维护顺序及性能方面更具优势。文中还展示了在Vue2中使用Map实现三级下拉框联动选择的完整示例，通过Map快速存取层级数据，提升了代码效率和可维护性。Map特别适合需要处理复杂数据结构的场景。

原创 前端面试七之列表渲染和组件重用

本文介绍了Vue.js的两个核心功能：列表渲染和组件重用。在列表渲染部分，展示了如何通过v-for循环渲染用户列表，并结合v-if处理加载状态和错误提示，同时将API请求逻辑封装为独立方法。组件重用部分则以可定制的按钮组件为例，详细说明了如何通过props接收参数、使用slot进行内容分发，以及利用计算属性动态生成样式。文章通过具体代码示例，展现了Vue.js在数据绑定和组件化开发方面的优势，为构建可维护的Web应用提供了实用指导。

原创 前端面试六之axios

这一篇让你详细了解axios，也足够应对面试。

原创 前端面试五之vue2基础

前端面试五之vue2基础

原创 前端面试四之Fetch API同步和异步

FetchAPI是基于Promise的现代网络请求接口，用于发送HTTP请求并异步处理响应，比传统XMLHttpRequest更简洁高效。由于网络请求耗时，FetchAPI采用异步设计避免阻塞主线程。同源策略限制跨域请求，可通过CORS（服务器设置响应头）或代理服务器（如VueCLI开发环境配置）解决跨域问题。前端开发中，代理服务器是Vue项目常用的跨域解决方案，通过转发请求避免直接跨域限制，且无需修改后端代码。

原创 前端面试三之控制语句

js中关于控制语句的面试题看这篇就够林

原创 前端面试二之运算符与表达式

js中和运算符，表达式有关的面试题看这一篇就够了

原创 前端面试之变量与数据类型

与js数据类型有关的面试题，看这一篇就够了

原创 nvm常用命令提示

nvm全英文也叫node.js version management，是一个nodejs的版本管理工具。nvm和n都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。可在点此在上下载最新版本,本次下载安装的是windows版本。目前最新版本v1.2.2,更新日期：2025-01-01。官网有详细教程。

原创 eventBus 事件中心管理组件间的通信

EventBus（事件总线）是Vue中用于实现非父子组件间通信的轻量级方案，通过一个中央Vue实例管理事件的发布与订阅。在需要通信的组件中通过。推荐单独创建文件（如。

原创 正则表达式

它是由。

原创 JavaScript 搜索历史功能实现

【代码】JavaScript 搜索历史功能实现。

原创 JavaScript 发票打印与总价计算解决方案

【代码】JavaScript 发票打印与总价计算解决方案。

原创 vue的生命周期

Vue 组件的生命周期描述了从创建到销毁的整个过程，每个阶段都提供了特定的钩子函数（Lifecycle Hooks），允许开发者在关键节点插入自定义逻辑。

原创 Vue 3中的ref和reactive有什么区别

特性refreactive数据类型任意类型对象类型访问方式.value直接访问属性解构响应性✅ 保持响应性❌ 需配合toRefs底层实现Proxy推荐场景基本类型、需要解构的独立值复杂对象、需要直接操作属性的场景// ref 示例// 修改对象属性// reactive 示例});// 直接操作// 解构保持响应性。

原创 JavaScript 中的 splice() 方法

适用场景：需要动态修改数组内容（如删除中间元素、批量插入数据）。性能：直接操作原数组，效率较高。灵活性：通过参数组合实现删除、添加或替换。

原创 浅拷贝和深拷贝

以下是浅拷贝（Shallow Copy）和深拷贝（Deep Copy）的详细解释和对比：