- 博客(197)
- 收藏
- 关注
RSS订阅原创 4个 Vue mixin 的原理拆解
在 Vue2 中，存在一个冷门API， 那就是 mixin，反正我没怎么用过，哈哈。下面一起对 mixin 的原理进行拆解，重点是对比一下 Vue3 hook 的存在和妙用。
2025-03-16 12:47:16
281
原创 3个 Vue $set 的应用场景
在 Vue2 中，由于 Object.defineProperty 的限制，Vue 无法检测到对象属性的直接新增或删除，以及数组索引的直接新增。为了让 Vue 监听新增属性的变化，Vue 提供了 Vue.set 方法（或 this.$set）。
2025-03-16 12:44:14
364
原创 3个 Vue nextTick 原理的关键点
我们都知道，Vue nextTick 的作用，就是确保在 DOM 更新完成后再执行某些操作，比如：读取 DOM 的最新状态 或 进行依赖 DOM 的逻辑处理。那它背后的工作原理，你知道吗？
2025-03-16 12:40:45
275
原创 1个基于 Three.js 的 Vue3 组件库
Tres.js 是一个基于 Three.js 的 Vue 3 组件库，旨在简化在 Vue 项目中创建和操作 3D 场景的过程。它通过封装 Three.js 的底层 API，提供了一套声明式的 Vue 组件，使开发者可以更高效地构建 Web 3D 应用。
2025-03-09 22:18:57
395
原创 3个 Vue Scoped 的核心原理
先用一句话概括 Vue Scoped 的核心原理：Vue 的 scoped 通过 唯一属性标记 + 属性选择器限定作用域，实现组件样式隔离，辅以深度选择器按需穿透子组件。
2025-03-09 22:10:50
319
原创 3个好玩且免费的api接口
今天分享 3 个我自己玩着比较有趣的api接口站，最关键的是免费玩。当然，这类api接口站真的很多很多，后面有机会再挑几个给朋友们分享~下面一起去玩玩！
2025-03-09 21:57:07
385
原创 4个 Vue 路由实现的过程
Vue 路由相信朋友们用的都很熟了，但是你知道 Vue 路由是如何实现的吗？其实，前端路由是通过监听URL的变化，然后根据不同的URL路径显示不同的页面内容。
2025-03-09 21:16:21
821
原创 深度区分 computed 和 watch（Vue2必会）
computed 和 watch 是 Vue 中最重要的两个API。下面我们将从 实现原理层面 去深度区分二者，朋友们开搞！
2025-03-02 12:20:45
161
原创 Vue 的 MVVM 工作原理（Vue2必会）
今天又是一个老生常谈的问题，Vue 的 MVVM 工作原理是什么？我在做面试的时候，总喜欢一开始先问这个，然后再据此对 Vue 相关原理展开追问。
2025-02-26 13:55:26
310
原创 为什么说 Vue 是渐进式框架（Vue2必会）
今天聊聊Vue中一个我们经常忽视的问题，为什么说 Vue 是渐进式框架？到底何为渐进式呢？下面我们来进行简单的拆解吧。
2025-02-26 11:37:58
175
原创 破防！Vue2 响应式原理（Vue2必会）
今天聊聊Vue生态前端一个老生常谈的问题，Vue2 响应式原理。这个问题呢，是基础，也是重点。网上有各种各样的理解，眼花缭乱。而这次，我会以一个全新的角度出发，主打一个简洁，通俗易懂。
2025-02-26 11:08:21
478
原创 获取当前webview的URL（Uniapp必会）
今天做uniapp项目时，遇到一个需求，需要获取当前webview的URL，然后根据页面URL判断，分别去做不同的处理。
2025-02-26 10:49:16
367
原创 H5端向App端通信（Uniapp必会）
今天这篇文章算是分享一段uniapp的坑吧，H5端向App端通信的一种解决实现。我感觉很有必要和没有遇到过的朋友们分享一下，下次用到的时候可以直接拿下，避免踩坑。
2025-02-20 21:28:42
365
原创 每天一个技术知识：Nuxt服务端渲染原理
特别是对于缓慢的网络情况或运行缓慢的设备 ，页面首屏时间大概有80%消耗在网络上，剩下的时间在后端读取数据以及浏览器渲染，显然要优化后面的20%是比较困难的，优化网络时间是效果最明显的手段。Nuxt.js 使用 Vue.js 的服务端渲染能力，将页面组件渲染为 HTML 字符串（虚拟DOM），再被转换为静态 HTML，同时保留 Vue 的客户端激活能力（hydration）。当用户点击页面中的链接时，Nuxt.js 会使用客户端路由（Vue Router）进行页面切换，无需重新加载整个页面。
2025-01-21 16:17:51
816
原创 每天一个技术知识：什么是前端工程化
我觉得，前端工程化就是，让前端项目的完整开发流程从“手工小作坊”变成“现代化流水线”，从而规范有序、分工明确、全自动化、安全可控、速度嘎嘎，进而干的更快、做的更好。实现一个较为完整的前端工程化，包括：技术选型、统一规范、前端组件化、测试、构建工具、自动化部署、前端监控、性能优化、重构、微服务、Severless。这一步我认为是最基础，也是最重要的，前端新技术栈很多，一定要选择最合适且最高效的技术栈，别搞到最后，发现不合适再去考虑重构，费时费力，得不偿失。代码基本功，也是个好习惯，让写的代码更加具有条理性。
2025-01-21 16:08:49
310
原创 使用 Tailwind CSS 的几点感触
对于 Tailwind CSS 我之前用的很少，我一般都是使用自定义原子css写法，感觉更自由更舒服，而且还更加通用，不知道有没有同感的兄弟哈。只不过，它是将一些单一的css属性封装成一些单一的类，开发时不再需要自己书写css样式，只需添加需要的类名即可，可显著提高开发效率。但是，这种写法修改起来非常麻烦，只能写一个新的类名去覆盖原来的样式，并且组件中会存在很多冗余的样式，自定义性极差。像我们过去常用的样式库 bootstrap ，将相似元素的公共样式封装成一个组件，在需要的地方直接引入就好了。
2025-01-16 22:06:28
547
原创 很妙的请求超时控制？分享 1 段优质 JS 代码片段！
这段代码展示了如何通过 Promise.race 方法，来巧妙实现对异步操作的超时控制。这在处理网络请求或其他可能耗时的操作时非常有用，可以避免长时间的等待导致的不良用户体验。
2024-08-16 21:26:49
452
原创 纯前端实现版本自动更新？分享 1 段优质 JS 代码片段！
这段代码展示了一种实用的页面动态更新机制的实现方式。不需要用户操作，且纯前端，就做到了实时检测更新。
2024-08-16 17:58:21
424
原创 一个能减少重绘的属性？分享 1 段优质 CSS 代码片段！
这段代码使用了 will-change 属性，是一种性能优化的手段，对于关注网页性能的开发者具有重要的参考价值。
2024-08-16 17:52:39
496
原创 长按图片识别二维码？分享 1 段优质 小程序 代码片段！
这段代码是典型的微信小程序图片组件的用法，很简单却十分常用，有必要记录分享一下。通过 mode 和 show-menu-by-longpress 属性的设置，呈现了小程序中对图片显示方式和图片交互方式的精细简单控制。
2024-08-15 12:00:05
492
1
原创 最快清除数组空值？分享 1 段优质 JS 代码片段！
这段代码展示了数组方法的巧妙运用，通过 filter 方法结合 Boolean 函数，实现了对数组的简洁过滤操作，为处理数组元素提供了一种高效且简洁的思路。
2024-08-15 11:53:54
290
原创 一行代码实现页面自动重定向？分享 1 段优质 HTML 代码片段！
这段代码展示了一种通过 HTML 元标签实现页面自动重定向的简单方法。通过设置 content 属性中的时间间隔，展示了如何在一定时间后执行重定向操作，对于需要控制页面跳转时间的场景有参考价值。
2024-08-15 11:33:26
764
原创 一行代码实现图片懒加载？分享 1 段优质 HTML 代码片段！
这段代码使用HTML5 提供的一个非常简单的方法：为图片元素添加loading="lazy"属性，实现了图片的懒加载。通过这种方式，我们可以让浏览器自动处理图片懒加载，无需额外的 js 脚本支持。
2024-08-07 09:40:15
485
原创 记录一个函数执行了多长时间？分享 1 段优质 JS 代码片段！
这段代码展示了一种测量 JavaScript 函数执行时间的简单方法。通过 console.time 和 console.timeEnd 方法，可以方便地记录和显示函数执行的时间。这在性能调优和调试过程中非常有用。
2024-08-07 09:34:36
304
原创 手写一个全局事件总线？分享 1 段优质 JS 代码片段！
这段代码展示了如何实现一个简单的事件总线，包含事件的发布 (emit)、订阅 (on) 和移除 (off) 机制。事件总线可以有效解耦组件，便于实现模块之间的通信。
2024-08-04 23:21:13
245
原创 建议使用 for of 循环？分享 1 段优质 JS 代码片段！
这段代码只使用 for of 就有效的遍历了对象和数组，并借助解构赋值，轻松处理其中的数据。当然，没有一种循环方式在所有情况下都是绝对最优的，需要根据具体的情况来选择最合适的循环方式。
2024-08-04 23:14:07
244
原创 最好用的深拷贝方法？分享 1 段优质 JS 代码片段！
这段代码展示了 structuredClone 方法在深度复制对象方面的应用，这对于处理复杂的数据结构非常有用。
2024-08-04 22:50:05
424
原创 什么是容器查询？分享 1 段优质 CSS 代码片段！
这段代码展示了 CSS 中的容器查询特性，它能够根据容器的不同宽度条件，为元素应用不同的样式。在项目中，可以把容器查询和媒体查询结合起来，实现更加灵活和响应式的布局设计。
2024-08-04 22:41:48
275
原创 变量初始化一定要这样写？分享 1 段优质 JS 代码片段！
这段代码展示了 JavaScript 中逻辑或（||）运算符在变量赋值中的常见用法，对于理解变量的初始化和默认值设置很有帮助。
2024-07-26 15:57:47
565
原创 URL参数中携带中文？分享 1 段优质 JS 代码片段！
这段代码展示了如何使用 URLSearchParams 对象来构建 URL 编码的查询字符串，同时使用 encodeURIComponent 函数来确保参数值中的特殊字符被正确编码。
2024-07-26 15:23:22
421
原创 让 color 自动适配背景色？分享 1 段优质 CSS 代码片段！
这段代码展示了如何使用 CSS 和 HTML 创建一个带有背景图片和标题文本的横幅（banner），并且通过 mix-blend-mode: difference; 为标题文本添加混合模式效果。
2024-07-23 15:55:33
664
原创 检测DOM是否已加载完成？分享 1 段优质 JS 代码片段！
这段代码展示了如何利用 DOMContentLoaded 和 load 事件来检测页面加载状态，并基于 document.readyState 的值进行相应的处理。
2024-07-23 15:44:55
660
原创 最简单的 CSS 居中方式？分享 1 段优质 CSS 代码片段！
这段代码展示了如何使用 CSS Grid 布局以及 place-content 属性来居中对齐元素。CSS Grid 是一种强大的布局工具，提供了简单且灵活的方式来实现复杂的布局，而place-content 属性进一步简化了居中对齐的实现。
2024-07-22 16:31:05
456
原创 让数组元素自动分类？分享 1 段优质 JS 代码片段！
这段代码展示了如何使用 Object.groupBy 方法对数组中的对象按特定属性进行分组。它是一种简洁、高效的分组方式，特别适用于需要根据对象的某个属性来对数据进行分类的场景。
2024-07-22 16:21:40
336
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人