- 博客(408)
- 收藏
- 关注
RSS订阅
原创 Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序、刷新页面vue做了什么？
一、什么是 vue 生命周期Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后；还有keep-alive 缓存特殊的两个阶段（activated(组件激活时)、deactivated(组件停用时)）；每次进入都会执行钩子中的函数。SSR有着更好的SEO、并且首屏加载速度更快等优点。刷新页面Vue做了什么？
2021-01-16 12:24:24
46307
11
原创 JS-编程黑科技，开发技巧，高逼格代码
js编程黑科技，开发技巧，高逼格代码，让你惊叹不已SB NB打乱一个数字数组的顺序void后面跟任何变量都会返回undefined~~取整清空数组delete删除数组的弊端使用switch/case代替一大叠的if/else不要在循环内部使用try-catch-finally使用XMLHttpRequests时注意设置超时
2019-04-03 16:56:36
7806
1
原创 前端好用工具推荐
1.图片处理工具Jinaconvert工具网站地址：https://jinaconvert.com/cn/这款图片处理工具也相当的强大，想要的各种各样的格式（JPG, PNG, GIF, BMP, TIFF, ICO, SVG和更多图片格式）都可以转换，在编程和生活中都可以用得到，赶紧收藏起来吧。2.代码在线测试工具 https://tool.lu/可以对js、css、...
2019-04-03 12:20:17
1159
原创 pc端和移动端默认样式重置(rem布局)
为何要用重置样式浏览器默认字体大小rem 适配： html {font-size:} 设置值问题移动端1px边框问题rem+动态html的font-size
2018-06-05 19:20:31
2003
1
原创 vue.js 三种方式安装(vue-cli)
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 下面介绍三种 Vue.js 的安装方法： 1.独立版本 我们可以在Vue.js的官网上直接下载vueassets和static的区别pnpmnvm(管理Node版本)、nrm(管理镜像源) 详解Vue生命周期父子组件的执行顺序解决安装依赖包问题
2018-05-29 07:49:05
355135
123
原创 文本在盒子中水平、垂直居中（图片与文本居中）、多行文本垂直居中、盒子居中
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<t...
2018-05-23 10:37:12
37361
2
原创 html默认css样式的标签及去除(全局)
1.标签的默认样式和清除默认样式（统一全局样式）的代码大多数标签都有自己的默认样式，比如遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地...
2018-05-19 09:27:11
43774
原创 PC企微、小程序预览文件[‘pdf‘, ‘xlsx‘, ‘xls‘, ‘doc‘, ‘docx‘, ‘ppt‘, ‘pptx‘]
wx.openDocument在 PC 端打不开pdf文档，在手机端表现正常wx.downloadFile() 小程序提供的 API，用于从网络上下载文件资源到本地。它通过发起一个 HTTPS GET 请求来获取文件，并返回文件的本地临时路径。wx.saveFile() 微信小程序提供的 API，用于将临时文件保存到本地的 API 长期保存wx.saveFileToDisk() 其功能是将文件系统中的文件保存到用户的磁盘上 直接保存并打开文件。根据官方开发文档的说明，该接口仅在 PC 端支持。
2026-01-16 10:00:58
861
原创 vue3切换路由时页面空白问题解决办法
Vue3页面空白问题解决方案：1）为router-view添加key属性:key="$route.fullPath"解决保存后显示空白问题；2）检查根组件是否被div包裹且template下无直接注释，确保正确代码结构。两种方法分别针对不同场景下的页面空白现象，修改后需刷新页面验证效果。注意修改位置为layout组件而非App.vue，避免导航标签异常。vue3切换路由后页面不报错显示空白，刷新后显示正常:key="$route.fullPath"
2025-11-07 14:58:04
584
原创 后端接口太慢，前端如何优雅地实现一个“请求队列”，避免并发打爆服务器？（一次性发送多个请求的优化方案）
【前端请求队列优化方案】针对批量请求导致页面卡顿和服务器过载的问题，本文提出了请求队列的解决方案。通过实现一个RequestPool类，可控制请求并发数量（默认3个），支持失败重试（可配置次数和间隔）、超时处理（默认20秒）和请求去重功能。该方案采用队列机制管理请求，确保同时运行的请求数不超过设定阈值，并自动处理任务排队和接续。使用示例显示，相比Promise.all的无序并发，该方案能有效减轻服务器压力，优化前端性能，尤其适用于批量操作、文件上传等高并发场景。代码可直接集成到项目中，实现"即插即用"的请求
2025-07-01 14:40:52
831
原创 Chrome(Google) 浏览器使用vue Devtools调试
Chrome(Google) 浏览器使用vue Devtools调试componentsVuexEventsRoutingPerformancsSettings
2025-05-01 00:15:00
2156
原创 开发并发布一个属于自己的包（npm）
创建一个npm包涉及几个步骤，包括设置你的项目结构、编写代码、编写文档、测试你的代码，以及发布到npm仓库。以下是一个基本的指南，帮助你从头开始创建一个npm包。开发并发布一个属于自己的包（npm）升级为ES6模块导入（import/export）手把手教你开发npm包
2025-04-24 11:24:46
1627
原创 Chrome谷歌浏览器调试代码技巧
如何快速切换谷歌浏览器F12控制台的中文英文Chrome谷歌浏览器F12设置中文CSS 权重和层叠Elements 面板/元素：用于查看和调试 HTML 结构和 CSS 样式。左边展示的是页面的 DOM 树结构，右边展示的是对应的 CSS 样式，可以随时更改来查看效果。styles/样式：当前选中元素的样式表信息computed/计算：当前选中元素的最终计算结果Console 面板/控制台：用于查看 JavaScript 的输出信息和错误提示，还可以在这里执行 JavaScript 代码。
2025-04-20 09:42:55
2332
原创 vscode GitLens使用
vscode GitLens使用加入暂存区，和取消修改操作取消暂存区，取消add操作commit（提交）后撤回push（推送）后撤回提交记录分支合并分支创建工作区暂存
2025-04-07 10:08:33
5069
原创 Chrome(Google) 浏览器安装Vue2、Vue3 Devtools插件方法
Chrome(Google) 浏览器安装Vue2、Vue3 Devtools插件方法
2025-03-25 10:00:10
5037
3
原创 vscode将文件中行尾默认CRLF改为LF
vscode将文件中行尾默认CRLF改为LF在Linux环境下，行尾序列（EOL）指的是行结束符。在Linux环境中，通常使用LF（Line Feed，即换行符）作为行尾序列。而在Windows系统中，则常使用CRLF（Carriage Return Line Feed，即回车加换行符）作为行尾序列。如果你在使用VSCode（Visual Studio Code）编辑文件时希望确保你的文件在Linux环境下能正确显示，你应该将文件的行尾序列设置为LF。
2025-03-24 17:58:16
3730
1
原创 Vue 项目中 CDN 引入的利弊及解决方案
Vue 项目中 CDN 引入的利弊及解决方案使用第三方CDN带来的问题及解决方案使用多个 CDN 服务本地备份方案本地缓存版本锁定
2025-03-14 10:03:32
2351
原创 Vue项目发布后浏览器缓存问题解决
Vue项目发布后浏览器缓存问题解决场景：前端vue网站项目使用wepack打包后进行部署，但是用户浏览器访问网站时加载了缓存，导致没有及时更新。 清除 Vue 缓存主要涉及到浏览器缓存和 Vue 应用的缓存。1、配置public/index.html；2、可以通过刷新页面强制清除缓存；3、通过更改文件名或添加版本号来避免缓存；4、使用 Vue 的内置方法清除缓存；5、通过配置 Webpack 来避免缓存；6、配置nginx不缓存index.html。
2025-03-13 20:27:37
8533
原创 JS - Array Api
push()和pop() shift()和unshift() reverse()sort()splice()fill()join()toString()slice()indexOf()findIndex()find()includes()map()filter()every()some()reduce()concat()flat()flatMap()Array.from()forEach()修改原数组控制循环和函数行为break、continue和return
2024-12-30 17:57:16
952
原创 React 性能优化
React 是一个用于构建动态用户界面的强大库，但随着应用程序的增长，可能会出现性能问题。在本指南中，我们将探讨优化 React Web 应用程序的关键步骤，以确保其平稳运行。React.memouseCallback和useMemoReact.lazy和Suspense将您的应用程序拆分为较小的包，以减少初始加载时间craco/webpack打包优化
2024-12-30 15:51:46
1327
原创 transform、animation、transition？
transform它就像一次性地将元素从一个状态改变到另一个状态，没有动画过程transition过渡是一种样式转换到另一种样式时的效果animation是利用@keyframes关键帧完成（元素从开始过程到结束）不需要js技术就可以完成的动画制作通常情况下，transform会与transition或animation结合使用，例如使用transition来实现平滑的旋转效果 ()，或者使用animation来创建更复杂的位移动画。单独使用transform只会改变元素的最终状态，而不会产生动画效果。
2024-12-29 17:57:27
1678
原创 React 组件的通信方式
React 组件的通信方式父传子 子传父 父子通信共同父组件实现兄弟通信跨级组件通信 createContext() useContext()使用Event Bus进行非父子通信使用 Redux 等状态管理库
2024-12-28 02:16:12
1646
原创 微信小程序性能优化、分包
性能优化是任何应用开发中的重要组成部分，尤其是在移动环境中。对于微信小程序而言，随着用户量的增加和应用功能的丰富，性能优化显得尤为关键。良好的性能不仅提升用户体验，还能增加用户留存率和应用的使用频率。性能优化，涵盖从首屏加载、分包、网络请求到渲染性能等多个方面。优化微信小程序超包问网络请求：合并请求，减少HTTP请求次数；使用缓存策略减少重复请求。布局与样式：避免使用复杂的CSS选择器；合理使用Flex布局减少重排重绘。事件处理：移除不再需要的事件监听器，防止内存泄漏。分包异步化
2024-12-25 15:07:41
2608
原创 前端性能优化之大文件上传
在现代Web应用中，用户上传大文件已成为常见需求。然而，直接上传大文件会面临诸多挑战，例如网络不稳定导致上传中断、长时间上传导致用户体验差、服务器压力大等。因此，优化大文件上传性能显得尤为重要。文件切片与并发上传 断点续传 后台处理优化 安全性考虑 用户体验优化 秒传功能 基于WebWorker的并行处理vue-simple-uploader计算文件哈希值文件切片并发上传查询上传失败的切片Promise.allSettled()
2024-12-24 13:35:41
4495
2
原创 为什么 React 的函数组件每次渲染执行两次
为什么 React 的函数组件每次渲染执行两次React 的函数组件在每次渲染时会执行两次的原因是什么？React 函数组件为什么会在渲染时执行两次而不是一次？React 函数组件为什么会执行两次而不是一次呢？有什么好处？
2024-08-16 09:08:28
4437
原创 React 中 react-i18next 切换语言（ 项目国际化 ）
首先在项目中安装i18n插件，然后将插件引入到项目，然后配置语言包，然后就用特定的方法来展示可以切换语言的字段。通过调用这个i18n changeLanguage(languageType) 这样一个方法就可以简单的修改我们当前的语言。3.4、 在reducer中要操作i18n的配置文件，对 i18n 进行初始化操作及插件配置。可以在前端使用 `navigator.language` 或 `navigator.userLanguage` 获取浏览器的语言设置
2024-08-12 07:15:40
2730
原创 nvm(管理Node版本)、nrm(管理镜像源) 详解
NodeVersionManager（NVM）在处理多项目中不同Node.js版本需求的解决方案。pnpm 至少支持的node版本为： 18.12nrm 是一个 npm 源管理器，允许你快速地在 npm源间切换。nvm 安装node低版本报错问题（nvm install 14.21.3）到nvm官网下载安装程序
2024-08-12 07:14:19
33577
4
原创 React 解决跨域
这里注意，http-proxy-middleware 模块是有版本区别的，默认安装最新版本，然后在 src 目录下新建。并非Webpack打包工具，直接使用server的proxy属性即可。react简单解决跨域可以直接在。http-proxy-middlewareAccess to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORSpolicy: No 'Access-Control-Allow-Origin'
2024-08-08 09:02:17
2553
原创 react-router-dom使用指南（最新V6.22.2）
查询参数不需要在路由中定义使用 useSearchParamshook 来访问和修改查询参数。其用法和 useState类似，会返回当前对象和更改它的方法使用 setSearchParams时，必须传入所有的查询参数，否则会覆盖已有参数// 当前路径为 /foo?// /foo?name=foo通过嵌套的书写Route组件实现对嵌套路由的定义。path开头为的为绝对路径，反之为相对路径react-loadableNavLink高亮useRoutes的返回是 React Element，或是 null
2024-08-06 16:47:23
2371
原创 React 全讲解
React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。React入门react-router路由懒加载 React.lazy() SuspensereduxReact类组件中的thisReact组件通信React.createElement()NavLink高亮react-app-rewiredconfig-overrides.jsclassnames纯函数副作用受控组件
2024-08-06 07:33:39
1677
转载 URLSearchParams：JavaScript中的URL查询参数处理工具
我们可以看到URLSearchParams的强大之处，它简化了URL参数的获取、解析、构建和更新过程。无论是从URL中获取参数值，还是构建具有特定参数的URL，URLSearchParams都是一个非常有用的工具。在上述示例中，通过window.location.search获取当前URL的查询参数部分，并使用URLSearchParams对象解析该参数。除了获取和解析URL参数，URLSearchParams还提供了方便的方法来构建和更新URL参数。url-search-params-polyfill
2024-07-29 09:32:10
2183
原创 lodash与lodash-es 工具库区别
lodash与lodash-es 工具库区别Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库，Node.js版本需>6。lodash 是默认的commonjs版本，是为了良好的浏览器兼容性, 它使用了旧版es5的模块语法，体积大。Lodash 是一个非常流行的 JavaScript 实用工具库，涵盖了数组处理、对象操作、函数式编程、字符串处理等。lodash-es 是 Lodash 库的 ECMAScript 模块版本，支持 ES6 模块的环境下提供的模块化版本。
2024-07-13 16:26:30
2729
原创 使用void 0替代undefined
在很多大厂的规范里面，有这么一条规定：不让直接使用undefined关键字，而应该使用void 0来替代undefined。void是一个关键字，他后面跟的是一个表达式，不管这个表达式算的是啥，后面随便写个东西，最终整个表达式返回一个undefined；比如void 123456;最终结果返回的都是undefined；在void后面随便写个0 1 2啥的都无所谓，只是习惯统一写个0；让这个东西来替代书写undefined。
2024-07-08 13:22:24
713
原创 Vue2/3中的this
Vue3.0中this的替代方法，Vu3获取thisgetCurrentInstance() 方法，获取当前组件的实例，通过 ctx(开发)或 proxy(开发、生产) 属性获得当前上下文，从而就能在setup中使用router和vuexVue2中，为什么this能直接获取到data和methods通过this能直接获取到methods，是因为在new Vue的时候遍历了methods，为每一个methods方法通过bind指定了this，也就是指定了this为new Vue的实例（vm）。
2024-06-25 12:56:35
1810
原创 微信小程序接入支付功能并实现支付
因此，在本文中，我们将介绍如何在微信小程序中实现微信支付。个人感觉类似微信小程序开发添加的request合法域名, 上面添加的这个目录,应该和你在后期在程序后台写的最终方法调用名一致,假设这里你设置的是 https://abc.cn/mypay/payOP。需要注意的是，在调用支付模块之前，需要先引入支付模块，并进行相应的设置和参数传递。2. 设置API密钥: 依次找到 商户平台->账号中心->API安全->设置APIv2密钥 设置后,可以把密钥拷贝出来记住,下面的code部分也需要该信息。
2024-03-26 17:42:02
9168
原创 Vue3 组件之间的通信
props父传子emits子传父mitt任意组件互传provide inject跨组件传值插槽传结构v-model
2024-03-22 21:43:27
2287
2
原创 Vue3 基础
ref reactive Object.defineProperty() Proxycomputed() 计算属性watch() 监听数据watchEffect()toRef unref triggerRef() 更新视图shallowRef shallowReactivereadonly shallowReadonlytoRaw markRawrouter路由导航守卫组件通信父传子 子传父 任意组件通信mitt provide inject组件命名获取实例v-memo 性能优
2024-03-22 21:41:32
2350
原创 修饰符.sync与v-model区别
1、相同点都是语法糖，都可以实现父子组件中的数据的双向通信。2、区别点使用格式：传值方式：注意：v-model 只能有一个；.sync 可以有多个。此外，.sync是Vue 2中的指令，而在Vue 3中，v-model取代了.sync的位置，并且可以在一个组件中使用多次。修饰符.sync与v-model区别
2024-03-20 13:26:35
1194
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人