Vue 3 中 ref 和 reactive 在模板自动解包上的差异与踩坑记录-低调大师

Vue 3 中 ref 和 reactive 在模板自动解包上的差异与踩坑记录

2026-09-28 2

Vue 3 中如何正确监听元素尺寸变化：ResizeObserver 与自定义指令的实战

做后台管理系统的图表模块时，经常遇到一个情况：容器宽度明明是 100%，图表初始化后却挤在角落，或者拖拽侧边栏后图表没有重新计算尺寸，留出大片空白。这类问题大多不是 ECharts 或 Chart.js 本身的问题，而是 JS 没有感知到元素尺寸变化。传统的 window.resize 只能监听视口变化，但元素尺寸变动还可能来自 Flex 布局调整、父级 display 切换、字体加载导致的回流，甚至浏览器 DevTools 打开时的布局变化。ResizeObserver 就是为此而生，它能观察任意元素的 content-box 或 border-box 尺寸，在尺寸变化时触发回调。这篇文章会...

2026-09-28

2

表格组件在后台系统里几乎是刚需，但当数据量上千行、每行内容高度又不固定时，浏览器会直接卡成幻灯片。很多人第一反应是找现成的虚拟滚动库，可用在 el-table 或 antd Table 上时，往往发现它们只支持固定行高，稍微有点换行、图片或自定义插槽，滚动条就开始乱跳。这背后的核心矛盾是：虚拟滚动依赖精确的偏移量计算，而动态行高让每个元素的高度在渲染前无法预知。我在实际项目里处理过带折叠面板、多行文本和操作按钮的十万级数据表格，最终选择用 IntersectionObserver 配合占位元素来动态测量真实高度，再结合二分查找定位可视区域。这篇文章会从实际代码出发，讲清楚怎么在 Vue 3 和...

2026-09-28

1

资源下载

更多资源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。