- 博客(400)
- 收藏
- 关注
RSS订阅
原创 Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序、刷新页面vue做了什么？
一、什么是 vue 生命周期Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。Vue 的生命周期主要共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后；还有keep-alive 缓存特殊的两个阶段（activated(组件激活时)、deactivated(组件停用时)）；每次进入都会执行钩子中的函数。SSR有着更好的SEO、并且首屏加载速度更快等优点。
2021-01-16 12:24:24
41424
10
原创 JS-编程黑科技，开发技巧，高逼格代码
js编程黑科技，开发技巧，高逼格代码，让你惊叹不已SB NB打乱一个数字数组的顺序void后面跟任何变量都会返回undefined~~取整清空数组delete删除数组的弊端使用switch/case代替一大叠的if/else不要在循环内部使用try-catch-finally使用XMLHttpRequests时注意设置超时
2019-04-03 16:56:36
7458
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
1104
原创 pc端和移动端默认样式重置(rem布局)
为何要用重置样式浏览器默认字体大小rem 适配： html {font-size:} 设置值问题移动端1px边框问题rem+动态html的font-size
2018-06-05 19:20:31
1803
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
348668
122
原创 文本在盒子中水平、垂直居中（图片与文本居中）、多行文本垂直居中、盒子居中
在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<t...
2018-05-23 10:37:12
36395
2
原创 html默认css样式的标签及去除(全局)
1.标签的默认样式和清除默认样式（统一全局样式）的代码大多数标签都有自己的默认样式，比如遇到的body默认外边距，另外本例中ul前的圆点及左侧的内边距，另h1-h6字体大小各不相同，em默认为斜体，strong表示粗体。正因为有这些默认样式，一个设计合理的页面，即使没有加载样式，也能让用户很容易阅读。但此时这些默认样式对我们没用，所以需要清除掉，为了方便，建议用标签重定义方式，这样可以很简单地...
2018-05-19 09:27:11
42846
原创 Chrome(Google) 浏览器安装Vue2、Vue3 Devtools插件方法
Chrome(Google) 浏览器安装Vue2、Vue3 Devtools插件方法
2025-03-25 10:00:10
559
原创 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
508
原创 Vue 项目中 CDN 引入的利弊及解决方案
Vue 项目中 CDN 引入的利弊及解决方案使用第三方CDN带来的问题及解决方案使用多个 CDN 服务本地备份方案本地缓存版本锁定
2025-03-14 10:03:32
924
原创 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
1531
原创 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()
2024-12-30 17:57:16
690
原创 React 性能优化
React 是一个用于构建动态用户界面的强大库，但随着应用程序的增长，可能会出现性能问题。在本指南中，我们将探讨优化 React Web 应用程序的关键步骤，以确保其平稳运行。React.memouseCallback和useMemoReact.lazy和Suspense将您的应用程序拆分为较小的包，以减少初始加载时间craco/webpack打包优化
2024-12-30 15:51:46
1098
原创 transform、animation、transition？
transform它就像一次性地将元素从一个状态改变到另一个状态，没有动画过程transition过渡是一种样式转换到另一种样式时的效果animation是利用@keyframes关键帧完成（元素从开始过程到结束）不需要js技术就可以完成的动画制作通常情况下，transform会与transition或animation结合使用，例如使用transition来实现平滑的旋转效果 ()，或者使用animation来创建更复杂的位移动画。单独使用transform只会改变元素的最终状态，而不会产生动画效果。
2024-12-29 17:57:27
1349
原创 React 组件的通信方式
React 组件的通信方式父传子 子传父 父子通信共同父组件实现兄弟通信跨级组件通信 createContext() useContext()使用Event Bus进行非父子通信使用 Redux 等状态管理库
2024-12-28 02:16:12
1277
原创 微信小程序性能优化、分包
性能优化是任何应用开发中的重要组成部分，尤其是在移动环境中。对于微信小程序而言，随着用户量的增加和应用功能的丰富，性能优化显得尤为关键。良好的性能不仅提升用户体验，还能增加用户留存率和应用的使用频率。性能优化，涵盖从首屏加载、分包、网络请求到渲染性能等多个方面。优化微信小程序超包问网络请求：合并请求，减少HTTP请求次数；使用缓存策略减少重复请求。布局与样式：避免使用复杂的CSS选择器；合理使用Flex布局减少重排重绘。事件处理：移除不再需要的事件监听器，防止内存泄漏。分包异步化
2024-12-25 15:07:41
1202
原创 前端性能优化之大文件上传
在现代Web应用中，用户上传大文件已成为常见需求。然而，直接上传大文件会面临诸多挑战，例如网络不稳定导致上传中断、长时间上传导致用户体验差、服务器压力大等。因此，优化大文件上传性能显得尤为重要。文件切片与并发上传 断点续传 后台处理优化 安全性考虑 用户体验优化 秒传功能 基于WebWorker的并行处理vue-simple-uploader计算文件哈希值
2024-12-24 13:35:41
1664
原创 为什么 React 的函数组件每次渲染执行两次
为什么 React 的函数组件每次渲染执行两次React 的函数组件在每次渲染时会执行两次的原因是什么？React 函数组件为什么会在渲染时执行两次而不是一次？React 函数组件为什么会执行两次而不是一次呢？有什么好处？
2024-08-16 09:08:28
3115
原创 React 中 react-i18next 切换语言（ 项目国际化 ）
首先在项目中安装i18n插件，然后将插件引入到项目，然后配置语言包，然后就用特定的方法来展示可以切换语言的字段。通过调用这个i18n changeLanguage(languageType) 这样一个方法就可以简单的修改我们当前的语言。3.4、 在reducer中要操作i18n的配置文件，对 i18n 进行初始化操作及插件配置。可以在前端使用 `navigator.language` 或 `navigator.userLanguage` 获取浏览器的语言设置
2024-08-12 07:15:40
1985
原创 nvm(管理Node版本)、nrm(管理镜像源) 详解
NodeVersionManager（NVM）在处理多项目中不同Node.js版本需求的解决方案。pnpm 至少支持的node版本为： 18.12nrm 是一个 npm 源管理器，允许你快速地在 npm源间切换。
2024-08-12 07:14:19
18275
2
原创 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
1475
原创 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
1491
原创 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
1353
原创 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
1595
原创 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
1974
原创 使用void 0替代undefined
在很多大厂的规范里面，有这么一条规定：不让直接使用undefined关键字，而应该使用void 0来替代undefined。void是一个关键字，他后面跟的是一个表达式，不管这个表达式算的是啥，后面随便写个东西，最终整个表达式返回一个undefined；比如void 123456;最终结果返回的都是undefined；在void后面随便写个0 1 2啥的都无所谓，只是习惯统一写个0；让这个东西来替代书写undefined。
2024-07-08 13:22:24
608
原创 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
1394
原创 微信小程序接入支付功能并实现支付
因此，在本文中，我们将介绍如何在微信小程序中实现微信支付。个人感觉类似微信小程序开发添加的request合法域名, 上面添加的这个目录,应该和你在后期在程序后台写的最终方法调用名一致,假设这里你设置的是 https://abc.cn/mypay/payOP。需要注意的是，在调用支付模块之前，需要先引入支付模块，并进行相应的设置和参数传递。2. 设置API密钥: 依次找到 商户平台->账号中心->API安全->设置APIv2密钥 设置后,可以把密钥拷贝出来记住,下面的code部分也需要该信息。
2024-03-26 17:42:02
7424
原创 Vue3 组件之间的通信
props父传子emits子传父mitt任意组件互传provide inject跨组件传值插槽传结构v-model
2024-03-22 21:43:27
1865
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
2145
原创 修饰符.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
1098
原创 前端面试题Vue、React
1、vue2和vue3的主要区别1、性能优化：Vue3对虚拟DOM进行了优化，例如使用了更高效的算法，缩减了代码量。此外，Vue3还利用Proxy代理优化了响应式系统，提高了性能。2、新特性：Vue3引入了Composition API，是一种函数式API。Composition API使得组合逻辑更加容易，能够更好地重用组件逻辑。3、Tree-shaking：Vue3支持更好的Tree-shaking（摇树优化）能力，使得项目打包后更加精简，加载速度更快。React
2024-03-18 23:52:19
1122
原创 JS的四种设计模式
工厂模式简单的工厂模式可以理解为解决多个相似的问题单例模式只能被实例化(构造函数给实例添加属性与方法)一次沙箱模式将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值发布者订阅模式就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送通知所有的订阅者：发布者触发时依次执行缓存列表里所有的订阅者回调
2024-03-18 21:25:12
637
原创 HTTP和HTTPS的区别，HTTPS加密原理是?
总之，HTTPS通过加密和认证技术保证数据传输的安全性，是一种更加安全可靠的网络传输协议，比HTTP更适合传输敏感信息和保护用户隐私。HTTP和HTTPS都是网络传输协议，主要用于浏览器和服务器之间的数据传输，但它们在数据传输的安全性、加密方式、端口等方面有所不同。
2024-03-16 23:35:28
1130
1
原创 微信小程序基础面试题
微信小程序自定义 TabBar 是指开发者可以自己定义底部的 TabBar，而不是使用微信小程序原生的 TabBar。自定义 TabBar 可以让小程序的底部导航更加灵活多样化，同时也可以更好地满足用户的需求。自定义 TabBar 的实现方法是在小程序的 app.json 文件中定义一个 tabBar 字段，通过设置tabBar.custom 属性为 true，告诉小程序使用自定义 TabBar。同时，还需要在 tabBar.list 字段中设置自定义 TabBar 的样式和图片等信息。
2024-03-15 16:52:51
3917
2
原创 前端接口防止重复请求实现方案
虽然大部分的接口处理我们都是加了的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做。
2024-03-15 00:20:22
1302
原创 前端大屏适配几种方案
数据大屏适配1、使用响应式布局 Flex2、利用媒体查询@media (min-width: 1200px)3、使用rem或vw单位4、引入第三方库scale（缩放）适配Echarts适配字体、间隙问题 适配处理
2024-03-13 12:18:29
5421
原创 Vue首屏优化方案
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。Vue中计算白屏时间、首屏加载时间performance.timing分析下前端加载速度慢原因webpack-bundle-analyzer减小入口文件积；UI框架按需加载代码层面的优化 - 代码尽量精简减少重排；减少dom操作移除不再需要的事件监听，防止内存泄漏网络请求优化开启GZip压缩图片资源的压缩采用第三方cdn资源资源加载优化利用浏览器缓存Br
2024-03-11 20:00:01
2688
原创 js实现实时刷新(setInterval、WebSocket、EventSource)
可能有很多的同学有用 setInterval 控制 ajax 不断向服务端请求最新数据的经历看下面的代码：当结果返回之后再延时触发下一次的请求，这样虽然没办法保证两次请求之间的间隔时间完全一致但是至少可以保证数据返回的节奏是稳定的，看似已经实现了需求但是这么搞我们先不去管他的性能就代码结构也算不上优雅，为了解决这个问题可以让服务端长时间和客户端保持连接进行数据互通h5新增了和 EventSource 用来实现长轮询，下面我们来分析一下这两者的特点以及使用场景。发送get请求，状态码是101，轮询时间间隔后端
2023-12-06 21:10:57
3135
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人