- 博客(48)
- 收藏
- 关注
RSS订阅原创 vue源码讲解之 effect解析 （仅包含在effect中使用reacitve情况）
本文深入解析了Vue3响应式系统的核心API - effect。effect是响应式系统的"发动机"，具有三大功能：自动追踪依赖、自动执行更新和管理依赖关系。文章详细介绍了effect的内部实现机制，包括初始化阶段、依赖收集(track)、更新触发(trigger)等核心流程，并通过源码分析展示了ReactiveEffect类的关键实现。重点讲解了依赖收集的观察者模式实现原理，包括数据劫持、依赖收集和派发更新三个核心步骤。同时对比了观察者模式与发布-订阅模式的区别，指出effect采用的
2026-03-25 16:10:38
429
原创 vue源码讲解之 reactive解析（仅proxy部分）
Vue3中的reactive API通过Proxy和Reflect实现响应式数据绑定。它将普通JS对象转换为代理对象，在属性访问(get)时进行依赖收集，在属性修改(set)时触发更新。相比Vue2的Object.defineProperty，Proxy能拦截更多操作类型，完美支持数组响应式，且采用惰性代理提升性能。配合Reflect确保this指向正确，提供标准化行为。这种机制使开发者能像操作普通对象一样处理响应式数据，无需特殊API，同时保证了响应式系统的正确性和性能。
2026-03-20 17:58:12
400
原创 如何使用vitest的调试功能 及 如何使用vitest对组件进行测试
本文介绍了如何在Vue+Vite项目中使用Vitest进行测试。主要内容包括：1）Vitest简介，作为Vite生态的极速测试框架；2）基本使用方式，包括安装依赖和调试方法；3）重点讲解了在Vue项目中测试组件的完整流程，包括配置环境（需安装@vue/test-utils和jsdom）、编写测试用例（演示了基础按钮、禁用按钮等测试场景）。文章强调Vitest与Vite配置的统一性，适合前端组件库开发测试，推荐结合官方文档使用。
2026-03-19 16:06:06
415
原创 在vite+Vue3项目中使用 自定义svg 图标，借助vite-plugin-svg-icons 封装SvgIcon组件
本文介绍了在Vue3项目中通过vite-plugin-svg-icons插件实现SVG图标组件的方法。首先安装插件并配置vite.config.ts，指定图标目录和命名规则。然后在main.ts中引入虚拟模块注册。核心部分是封装可复用的SvgIcon组件，支持动态图标名称、自定义大小颜色等属性。最后演示了按需引入和全局注册两种使用方式。该方案实现了SVG图标的灵活管理和高效使用，适用于需要大量自定义图标的Vue3项目。
2025-12-21 22:33:22
1021
原创 win11电脑按键失灵，提供几个可能恢复的方法
《键盘失灵问题解决方法》摘要：文章分享了作者遇到键盘失灵（除Fn+功能键外全部失效）后的排查过程。作者尝试了四种解决方法：1)重置键盘组合键；2)检查粘滞键设置；3)常规重启；4)通过设备管理器卸载所有键盘驱动后重启。最终第四种方法解决了问题。文章指出该方法不能覆盖所有情况，且未能查明具体原因，但为类似问题提供了可行的解决思路。（147字）
2025-09-21 18:56:17
2679
原创 如何在rust中解析 windows 的 lnk文件（快捷方式）
这些天在使用rust写一个pc端应用程序，需要解析`nk文件获取lnk的图标以及原程序地址，之前并没有过pc端应用程序开发的经验， 所以在广大的互联网上游荡了两天。额🥺今天找到找到了这个库很好的解决标题的这个问题。
2025-03-07 22:47:25
891
原创 封装一个vue3控制并行任务数量的组合式函数
使用环境： vue3当需要处理多个异步任务时，想要控制并行异步任务的数量，不想所有任务同时执行导致产生性能上的问题，比如当需要同时发起多个网络请求，但又不想一次性发出过多请求导致服务器压力过大或者浏览器资源耗尽时，这个钩子就可以派上用场。
2025-02-18 07:34:03
477
原创 JavaScript的作用域与闭包
存储变量的值,并且之后可以对这个值进行访问或修改, 是几乎所有变成语言最基本的功能之一. 但是这些变量存在哪里, 如何快速找到他们, 这需要设计一套良好的规则来存储变量, 这套规则被称为作用域。（— 《你所不知道的JavaScript(上卷) 》）在MDN作用域是当前的执行上下文，在其中的值和表达式“可见”（可被访问）。如果一个变量或表达式不在当前的作用域中，那么它是不可用的。作用域也可以堆叠成层次结构，子作用域可以访问父作用域，反过来则不行。简单来说: js 的作用域是变量或表达式的作用范围。
2024-12-04 20:46:36
1010
原创 利用vue-capper封装一个可以函数式调用图片裁剪组件
使用该组件需要可以使用这里用到是版本本组件用到了element-ui的dialog, 这里也可以使用其他的dialog组件函数传入的参数, 参照type.ts中的如果组件封住有不合理的地方, 或者哪里有问题, 欢迎评论与私信。
2024-09-30 12:22:01
841
1
原创 vue3 实现文本内容超过N行折叠并显示“...展开”组件
> 组件内文字样式取决与外侧定义> 组件大小发生变化时,文本仍可以省略到指定行数> 文本不超过时, 无展开,收起按钮> 传入文本发生改变后, 组件展示新的文本
2024-09-28 20:39:29
2983
1
原创 关于el-card的height设置100%后, el-card内容超出高度后,内容被隐藏这件事
所以`el-card__body`的宽高, 由内容决定, 当内容超过了`el-card`设置的高度后就会出现内容被隐藏的问题,所以给`el-card__body`一个不超过`el-card`的宽高问题就可以解决
2024-09-27 11:58:07
1503
原创 vue3 自定义指令 自动获取节点的width 和 height
想写一个依赖库, 但是需要监听组件的width和height这些数据, 就找到了这个方法,不想每次使用的时候都要创建和销毁, 索性就直接封装成为一个指令用来获取想要的信息,对象上能够获取的信息还是非常多的, 除了还有等, 需要使用到这些可以到MDN去查看他的使用方法实现效果当元素大小发生改变时,会自动更新width 和height 的值。
2024-08-01 00:54:31
1878
原创 ElMessage自动引入,样式缺失和ts esline 报错问题解决
在配置了自动引用, 这样去使用显然不是优雅的, 而且每次时候都需要进行引入。这个会产生esline报错,和ts报错, 后面有解决方法。中进行全局引用, 当然这还是不优雅的 (所以看下面 ↓)如果按照这个过程没有配置成功, 可以找项目引入。的Readme文件, 按照提供的方法去搞。文件, 这时我们需要更新我们的。看到了英文, 嘿嘿打开翻译。
2024-07-22 00:34:41
1044
2
原创 关于我在vue3中使用swiper的使用碰到swiper-slide的width特别大的这件事儿
在加上其他的一些样式会将swiper撑开,swiper大小变化后影响后面slide的width的计算.swiper大小可变, 内部的slides的width是根据swiper的大小进行计算的,因为内部的。还要注意swiper可变的情况,要么对slide大小进行控制,要么对swiper进行控制, 可以使用。非常大, 奇怪的是我没有设置任何的行内样式啊。所以在使用swiper的时候除了注意。自己在写样式的时候设置为。属性对最大宽度进行限制。
2024-07-17 01:05:54
2003
2
原创 vue3 实现一个tab切换组件
3, 将bg大小进行调整 并移动到相应的位置。* 2. 获取元素的当前位置以及大小。// 没有找到值的时候找default。* 1. 找到相应的元素。文件: wqTabType。// wqTabs 元素。// 若没有找到tab。
2024-03-12 16:34:29
2159
原创 manjaro 安装 wps 教程
1. 安装wps主体```yay -S wps-office ```2. 安装wps字体 （如果下载未成功看下面的方法）```yay -S ttf-waps-fonts```3. 安装wps中文语言```yay -S wps-office-mui-zh-cn```
2024-03-06 08:19:27
2127
原创 vue3 + vite + ts 封装 SvgIcon组件
> 备注: SvgIcon组件的, 按照自己的喜好与需求去封装, > 还有很多使用其他插件的教程, 大家根据自己的需求去下载使用, > 但对于每篇教程都要保留一定的思考性, 如果能找到对应的版本就很棒了, > 没有得话就找一下相似版本的教程作为参考,
2023-08-11 23:27:08
859
原创 Object.assign()的使用以及模拟实现
Object.assign()是JavaScript中的一个内置方法用于一个或多个源对象属性复制到目标对象中语法如下多个源对象可以通过逗号分隔或作为一个数组传递该方法将返回目标对象, 其中包含源对象的属性, 如果目标对象中的属性与源对象的属性相同, 则源对象中的属性将覆盖到目标对象中的属性。
2023-08-04 15:16:20
476
原创 如何在vue3中使用swiper插件(教程)
/pagination 就是指示器, 在效果中为小圆点...一定要下载正确的版本, 每个版本的使用差异还是有一些的。我的项目环境Vue3+vite+ts+scss,// 他有很多的模块, 具体看官方文档。// 这里需要引入样式,2.使用以下代码进行测试。// 这里需要引入模块。// 这里需要引入组件。
2023-07-26 15:11:32
2617
6
原创 js判断数据类型的几种方法及其局限性(typeof, instanceof, Object.prototype.toString.call())
js中判断了类型的方法有很多, 这篇文章主要来说一下常用的几种判断类型的方法,以及使用:每个方法都各有优缺点,在日常使用的时候请结合这些优缺点进行斟酌:javaScript中typeof可以判断以下类型:undefined: 未定义的变量或者值boolean: 布尔类型, true 或falsenumber: 数值类型, 包括整数,浮点数, NaN, 和Infinity (无穷大)string: 字符串类星星, 表示文本symbol:符号类型,ES6中新增的基本数据类型function: 函数类型,可以
2023-06-08 11:21:04
1786
2
原创 CSS中flex属性的的使用以及应用场景有哪些
表示默认的状态,无需设置,适合小控件元素的分布布局,或者某一项内容动态变化的布局flex:0适用场景较少,适合设置在替换元素的父元素上,flex:none适用于不换行的呢绒固定或者较少的小控件元素上,如按钮flex:1适合等分布局flex:auto适合基于内容动态适配的布局。
2023-04-17 22:54:44
838
原创 js使用正则完成字符串去除空格(前后空格, 前空格, 后空格, 全部空格,中间空格)
去除字符串1) 前后空格2) 前空格3) 后空格4) 中间空格5) 去除中间空格(这个方法值得讨论)
2023-04-12 10:32:24
2102
3
原创 使用CSS实现书籍的翻页效果(使用了animation)
要注意的是父盒子要开启3d, 并且要调整视距;还要注意旋转的角度以及起始位置;定义动画的起始状态和结束状态;让翻转到反面的元素不显示。来实现中间的动画效果;废话不多说,直接上代码。
2023-04-11 19:35:13
3397
原创 js对字符串进行字符计数,并将结果按照顺序输出
根据排好序的数组,对数组进行遍历,根据数组中元素取出Map容器中的存储的数据。使用Set容器进行去重,将set转换为Array并进行排序,采用Map容器进行计数,
2023-04-11 08:48:52
469
原创 HTTPS的加密原理(工作机制)
对称加密， 非对称加密， CA证书， 数字签证，https加密机制，http协议与https协议的区别， https的安全性，http为什么不安全， 数字证数是一种权威性的电子文档,它提供了一种在Internet上验证身份的方式;其作用类似于司机的驾驶证或日常生活中的凭证;它是由一个权威机构--CA证数授权(Certificate Authority)中心发行的，人们可以在互联网交往中用它来识别对方的身份。
2023-03-13 12:49:37
3320
1
原创 2. 事件捕获 及 如何阻止冒泡
DOM事件流机制 / 事件捕获什么是DOM?DOM 是描述 HTML 的内部数据结构,它会将 Web 页面和 JavaScript 脚本连接起来, 并过滤一些不安全的内容;HTML 解析器会把字节转换成DOM一个事件在发生的时候会在子元素和父元素之间传播,这会分成三个阶段:1. window 传到目标节点 ---- 捕获阶段(上层传到底层)2. 目标节点触发 ---- 目标阶段3. 目标节点传到window ---- 冒泡阶段(底层传到上层)
2023-03-06 20:59:45
420
原创 5.flex布局
1)flex-direction: row(默认值,主轴未水平方向,起点在左端) | row-reverse(主轴为水平方向,起点在右端) | colunm(主轴为垂直方向,起始点在上沿) | column-reverse(主轴方向为垂直方向,起始点在下沿)决定主轴的方向2)flex-wrap: nowrap(默认值,不换行) | wrap(换行,第一行在上方) | wrap-reverse(换行,第一行在下方)如果一条轴线排不下，如何换行3)
2023-03-05 14:47:02
420
原创 如何使用markdown写目录
今天找到这样的一种方法,分享给大家, 希望在给使用markdown的你提供一些帮助。虽然是一个简单的笔记, 但如果有目录结构的化,就是快速定位到要看的位置,遇到了这样一个问题, 就是如何使用markdown写目录,链接部分使用 ` ` 标签的id值,这样点击链接的时候就可以快读定位到你想看的内容。今天在使用markdown记录笔记的时候,
2023-03-04 21:05:01
1607
原创 3. 清除浮动的几种方式,及其使用
使用before和after伪元素清除浮动(推荐使用): 这种方式也是使用额外标签方式达到效果，只是变相的使用了伪元素after/before，使得页面结构更简介，也是常用的清除浮动的方式。一个新的 display 属性的值，它可以创建无副作用的 BFC。给 元素设置 display: flow-root 属性后， 中的所有内容都会参与 BFC，浮动的内容不会从底部溢出。清除浮动: 清除浮动后造成的影响-->清除浮动主要为了解决父级元素因为浮动引起内部高度为0的问题。
2023-03-04 13:29:09
609
原创 前端发送请求的几种方式
Asynchronous JavaScript + XML（异步 JavaScript 和 XML）, 其本身不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML (en-US), XSLT, 以及最重要的 XMLHttpRequest。
2022-10-09 00:11:33
3969
原创 事件流 & 事件的执行过程
事件流描述的就是从页面中接受事件的顺序,而早期的IE和Netspace提出了完全相反的事件流的概念,IE事件流是事件冒泡,而Netspace的事件流就是事件捕获。IE提出的事件流就是事件冒泡,几从下至上,从目标触发的元素逐级向上传播,直到window对象。2)处于目标阶段：事件目标阶段(对真正用户发生交互的标签进行触发事件)，事件目标就指的该标签。而Netspace的事件流就是事件捕获,即从document逐级向下传播到目标元素,3)事件冒泡阶段冒泡阶段(执行一次完整的冒泡)二.事件冒泡事件捕获。
2022-10-05 10:55:01
506
原创 如何根据地理位置获取城市编码 / (高德地图) 获取城市编码API / 经纬度获取城市or城市编码
2022年9月29日,今天在做搜索天气的页面的时候遇到了这个问题,刚开始想用导入json文件的方法来去弄这个,有些json文件并没有做到那个精确,假如用到的地理位置是某个县,有可能就无法获取到城市编码.还需要自己去写方法,来截取存取地理位置的字符串.这里提供一个简单的方法,我们可以去使用某些地图平台的API(当然需要联网的情况下),去获取城市编码,比如百度地图或者高德地图.这里我使用的是高德地图.在文章的结尾我会附上原平台链接.代表的参数包括必填参数和可选参数。下面的列表枚举了这些参数及其使用规则。
2022-09-29 14:51:06
11627
1
原创 css中@font-face的使用
format]定义字体的格式,用来帮助浏览器识别字体,主要有以下这些格式：[truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)]font-face是css3中允许使用自定义字体的一个模块,它主要是把自己定义的web字体嵌入网页中。src:[url]加载字体可以是相对路径,可以是绝对路径,也可以是网络地址。font-weight:定义加粗样式。font-style:定义字体样式。
2022-09-26 22:22:35
1923
1
原创 JavaScript动画和CSS3动画的区别
如果动画只是简单的状态切换,不需要中间过程控制,这种情况下,CSS动画是优选方案,它可以让你将动画逻辑放在样式文件里,而不会让你的页面充斥JavaScript库,然而如果你在设计很复杂的客户端界面或者开发一个有着复杂UI状态的APP,那么你应该使用JS动画,这样你的动画可以保持高效,并且你的工作流也更可控,所以再实现一些小的交互动画的时候,就多考虑CSS动画,对于一些复杂控制的动画,使用JavaScript比较可靠。
2022-09-24 15:14:03
469
1
原创 JS判断一个值是什么类型
判断js数据类型有很多方法,我这里介绍以下三种常见的方法1.typeof运算符typeod是最常见的,使用它会返回一个字符串,设置函数对象和基本类型(js中的基本类型:number,string,boolean,null,undefined,object 还有ES6新增 symbol)的判断2.instanceof操作符(基于原型链)obj instanceof Object实质就是:instanceof操作符判断做操作数对象的圆形链上是否有右边这个构造函数的prototype属性,也就是说
2022-09-24 14:36:37
408
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人