深入 Vue 3 ref 的底层实现
深入 Vue 3 ref 的底层实现:从响应式基石到自动解包之谜 在 Vue 3 的 Composition API 中,ref 是我们最常使用的响应式工具之一。它看似简单,但其底层实现却蕴含了 Vue 3 响应式系统的核心思想。本文将带你深入源码,剖析 ref 的创建、依赖收集、触发更新以及自动解...
虚拟DOM和Document Fragment的区别?
在前端开发中,提升应用性能是永恒的主题。为了减少直接操作真实 DOM 带来的高昂性能开销(如重排和重绘),开发者们创造了多种优化技术。其中,虚拟DOM(Virtual DOM) 和 DocumentFragment 是两个常被提及的概念。它们都旨在提升效率,但工作原理、抽象层级和应用场景却截然不同。...
重排(Reflow)与重绘(Repaint)的区别?以及如何减少重排和重绘?
重排(Reflow)与重绘(Repaint):前端性能优化的基石 在网页开发中,我们经常听到“重排”(Reflow)和“重绘”(Repaint)这两个术语。它们是浏览器渲染页面的核心过程,也是影响页面性能的关键因素。理解它们的区别和触发条件,是进行前端性能优化的基础。...
【JS】Map和Object的区别
JavaScript 中的 Map 和 Object 都可以用来存储键值对,但它们在设计、性能和使用场景上有显著的区别。理解这些差异有助于在开发中做出更合适的选择。...
【JS】什么是Document Fragment?
DocumentFragment 是 Web API 中的一个接口,表示一个没有父级的最小化文档对象。它被设计为一个轻量级的“文档片段”容器,可以用来存储一组节点,通常用于高效地进行 DOM 操作。 核心概念 虚拟容器:DocumentFragment 本身不是一个完整的文档,也不是实际 DOM...
用Lottie做前端动画:从设计到落地的全流程实践
一、引言:为什么选择Lottie做动画?在前端开发中,实现复杂动画往往面临两大痛点: 手动编写CSS/JS动画代码繁琐:关键帧调试、性能优化耗时耗力,尤其是复杂交互动画 传统动画格式缺陷:GIF画质差、文件体积大;视频无法实现动态交互,且难以适配不同屏幕 Lottie的出现解决了这些...
CSS预处理器的优化与思考:从效率工具到工程化基石
一、引言:预处理器为何仍是前端工程的「刚需」? 在原生CSS逐步支持变量(--var)、嵌套语法(CSS Nesting Level 3草案)的今天,有人质疑:“CSS预处理器是否即将退出历史舞台?” 但现实是,在中大型项目中,Sass、Less等工具依然是工程化的核心组件。它们解决的不仅是语法糖问...
【@vitejs/plugin-legacy】Vue3 + Vite 的浏览器兼容策略
在现代前端开发中,Vue3 和 Vite 已经成为许多开发者构建高效、高性能应用的首选工具组合。然而,随着技术的不断进步,浏览器的兼容性问题仍然是一个不可忽视的话题。本文将探讨如何在使用 Vue3 + Vite 开发项目时,制定合理的浏览器兼容策略,确保应用能够在目标浏览器中正常运行。 Vite...
Vue3 中父组件调用子组件内的方法
在 Vue3 的开发中,组件化是其核心思想之一。父子组件之间的通信是常见的需求,而父组件调用子组件的方法也是开发中经常遇到的场景。本文将详细介绍如何在 Vue3 中实现父组件调用子组件的方法,并结合代码示例进行讲解。...
微信小程序中Buffer转UTF8字符串
背景 在开发大模型的流式返回接口时,需要将后端返回的二进制流转化为字符串。关于这个问题,在大多数情况下,我们可借助 TextDecoder 来达成。 TextDecoder 是一个内置的 JavaScript 对象,它能够把 ArrayBuffer 转换为字符串。 但是!在微信小程序中是不支持该对象...