结城-CSDN博客

原创深入解析 Vue.js 中的 `ref` 和 `shallowRef`：响应式编程的核心与优化实践

摘要（149字）： Vue 3 的 ref 和 shallowRef 是响应式数据处理的核心工具。ref 创建深层响应式对象，适合需要完全响应式的场景；而 shallowRef 仅对顶层值变化响应，性能更优，适合处理大型数据。关键区别在于响应式深度——ref 递归追踪所有属性变更，shallowRef 仅响应 .value 的替换操作。最佳实践中，小型数据用 ref，复杂对象用 shallowRef 结合 triggerRef 按需更新，二者配合可显著提升应用性能。

2025-07-25 14:13:42 483

原创前端如何利用多通道发布（MCP）打造高效AI驱动应用？

摘要：模型上下文协议（MCP）为前端开发者提供了连接AI与外部数据源的标准化接口，支持动态内容生成、智能工作流和交互式聊天应用。通过MCP，前端可无缝集成天气查询、GitHub Issue管理等场景，调用AI能力和工具链，降低开发耦合度。案例演示了React/Vue项目中如何通过MCP客户端与Python服务端交互，实现数据驱动的前端智能化，提升用户体验与开发效率。MCP的开放生态和动态扩展特性使其成为前端与AI融合的关键技术。

2025-07-24 18:24:03 559

原创深入掌握CSS Grid布局：每个属性详解与实战示例

CSS Grid布局的核心在于灵活性和控制力。通过这篇文章，你应该已经掌握了Grid的每个核心属性及其用法，从到minmax()，都能信手拈来。想彻底吃透Grid？修改上面的2×3网格，尝试用fr单位、minmax()和auto-fill调整布局。自己实现一个博客主页，包含头部、侧边栏、内容区和底部，用规划。打开MDN的Grid文档，查阅和等简写属性，扩展你的知识。希望这篇指南让你对Grid布局信心满满！多写代码，多调试，Grid会成为你的布局好帮手！🚀。

2025-07-24 15:12:18 686

原创全面解析 CSS Flex 布局：从入门到精通的所有属性详解

本文全面介绍了Flexbox布局的核心属性，分为容器属性和子项属性两部分。容器属性包括display、flex-direction、flex-wrap等，用于定义布局方向和子项排列方式；子项属性如flex-grow、flex-shrink等控制子项的伸缩行为。特别针对常见的flex:1导致尺寸失效问题，提供了三种解决方案：设置flex-basis初始尺寸、使用flex:none固定尺寸，或通过min/max-width限制尺寸。这些技巧能帮助开发者更灵活地实现响应式布局。

2025-07-24 11:20:05 444

原创性能优化：Vue 3 `v-memo` 指令详解

Vue 3.2.0引入的v-memo指令是一个性能优化工具，通过缓存模板子树减少不必要的渲染开销。它接受一个依赖数组，仅当数组中的值变化时才会重新渲染，适用于静态内容、大型列表和复杂计算场景。

2025-07-23 19:24:03 627

原创 JavaScript HTTP 请求：从老古董到新潮流

摘要：本文详细介绍了前端HTTP请求的几种实现方式，包括原生XMLHttpRequest、现代Fetch API以及主流第三方库Axios。XHR兼容性好但语法繁琐，Fetch基于Promise更简洁但需手动处理错误，Axios则封装了高级功能如拦截器和自动JSON转换。文章提供了各方法的代码示例，对比了优缺点，并指出Axios因其功能全面成为最流行的选择。最后提及未来趋势将更倾向于原生Fetch与第三方库的结合使用。

2025-07-23 11:54:32 549

原创 ES6 标签模板：前端框架的灵活利器

摘要： ES6模板字符串标签（Tagged Template Literals）通过自定义标签函数增强了字符串处理的灵活性，广泛应用于React（如Styled-Components样式动态绑定）和Lit（如高效DOM模板渲染）。其核心优势包括代码可读性、动态内容处理及安全性（如XSS防护）。示例展示了标签函数实现HTML转义逻辑。虽然现代浏览器普遍支持，旧环境需通过Babel转译或Polyfill（如core-js）确保兼容性。该特性还被扩展用于国际化、GraphQL查询等场景，体现了其在前端开发中的强大

2025-07-23 11:28:17 875

原创 Vue 3 响应式系统中的 effectScope、watchEffect、effect 和 watch 详解

Vue 3响应式系统中，effectScope、watchEffect、effect和watch是核心API。effect是底层响应式函数，自动追踪依赖并执行副作用；watchEffect是其高级封装，自动绑定组件生命周期，默认flush: 'pre'；watch显式监听数据变化。重点解析watchEffect的flush选项：pre（默认，DOM更新前执行）、post（DOM更新后执行）和sync（同步执行），不同模式适用于状态更新、DOM操作等场景。watch的flush选项功能类似但使用频率较低。合理

2025-07-22 18:47:57 918

原创聊聊 iframe：网页中的“窗口”是怎么回事？

2025-07-22 11:13:40 722

原创聊聊原生 CSS 变量：让样式更灵活的“魔法”

CSS变量（自定义属性）是一种强大的样式管理工具，允许开发者定义可复用的样式值。通过在:root中定义全局变量（如--main-color）并使用var()引用，可实现样式集中管理，提高代码可维护性。其核心优势包括：简化主题切换（如暗黑模式）、支持JavaScript动态修改、语义化命名提升可读性等。CSS变量遵循作用域规则，支持响应式设计和动画交互，相比预处理器变量更灵活。虽然IE11不兼容，但现代浏览器支持良好。典型应用场景包括设计系统、动态主题和布局调整，能显著提升开发效率和样式一致性。

2025-07-22 11:09:28 1213

原创深度解析 HTML `loading` 属性：优化网页性能的秘密武器

本文详细介绍了HTML的loading属性及其在现代网页开发中的应用。该属性支持lazy(延迟加载)、eager(立即加载)和auto(自动决定)三种取值，能有效优化页面性能。通过合理使用loading属性，开发者可显著提升首屏加载速度、节省带宽、改善用户体验和SEO表现。文章还阐述了其实现原理、浏览器支持情况，并提供了博客文章、视频嵌入和电商产品列表等实际应用案例。最后强调了避免对首屏资源使用lazy以及设置图片尺寸等注意事项，帮助开发者全面掌握这一性能优化工具。

2025-07-21 20:09:08 1261

原创深入解析响应式图片：全面掌握 srcset 和 sizes 属性

摘要：本文深入解析HTML5响应式图片技术，重点讲解srcset和sizes属性的使用方法和优化策略。从基础概念到高级应用，涵盖宽度描述符(w)和像素密度描述符(x)的配置技巧，详细说明浏览器选择算法和性能优化实践。通过对比<picture>元素，分析不同场景下的最佳方案，并提供电商产品图等实际案例。文章还针对常见问题给出解决方案，推荐使用respImageLint等工具进行测试验证，帮助开发者全面掌握响应式图片的实现方案。

2025-07-21 19:21:29 431

原创探索 Vue 3.6 的新玩法：Vapor 模式开启性能新篇章

Vue Vapor模式是Vue.js 3.6引入的一项实验性功能，通过摒弃虚拟DOM来提升性能。它采用编译器驱动方式，将模板直接转换为高效的DOM操作代码，运行时体积缩小至约6KB。Vapor模式专为Composition API设计，支持渐进式迁移，在复杂界面和频繁更新场景下性能优势明显。但目前仍存在调试工具支持有限、第三方库兼容性等限制。开发者可通过配置性能模式、使用.vapor后缀文件来体验这一创新功能。Vapor模式代表了Vue在性能优化方向的重要探索，为高性能应用开发提供了新选择。

2025-07-18 17:49:11 1134

原创揭秘Proxy拦截器：Vue3响应式核心

本文深入解析了 ES6 的 Proxy 对象及其在 Vue 3 中的应用。Proxy 通过 handler 对象提供的 13 种拦截方法（traps），可以定制目标对象的基本操作行为，如属性访问(get)、赋值(set)、删除(deleteProperty)等。重点介绍了 get 和 set 方法在 Vue 3 响应式系统中的核心作用：get 用于收集依赖，set 用于触发更新。其他拦截方法如 has、ownKeys 等也有独特应用场景，如隐藏私有属性、控制属性枚举等。

2025-07-18 16:47:39 774

原创从 VanJS 学到的实用编程技巧

学习 VanJS，我掌握了响应式编程、极简代码、函数式编程、事件处理、组件化设计、性能优化等技巧。通过计数器、卡片、列表等示例，学会用最少代码实现高效 UI，理念通用于其他框架，超值！

2025-07-18 16:30:09 369

原创使用位运算优化 Vue.js 应用：高效状态管理技巧

摘要：本文介绍了如何在 Vue.js 中使用位运算优化状态管理，包括权限管理、多选框状态和条件渲染三大应用场景。通过位运算操作一个整数来存储多个布尔状态，相比传统方法更高效且节省内存。文章详细展示了每种场景的代码实现，说明位运算如何与 Vue 响应式系统结合，同时提醒了使用时的注意事项，如位数限制和可读性问题。位运算适合性能敏感场景，但需权衡代码可维护性。

2025-07-17 17:07:23 688

原创 nodejs 打印目录树

初学node关于目录模块//打印目录树const fs = require('fs');const path = require('path');let pathParams = process.argv[2];//拿到路径参数，cmd命令中第三个参数if(!pathParams){ pathParams = './'}//转成绝对路径pathParams = path.r...

2020-01-09 17:29:09 1194

原创微信小程序软键盘弹出的问题

微信小程序软键盘弹出的问题这里记录一个微信中开发的一个小问题，1.当我开发这个页面功能的时候在缩小的状态正常情况聚焦时在手机上会有一个软键盘弹出来完全遮住了我textarea输入框2.遮住状态这个时候我们还发现页面被顶了上去，头部的导航栏没有了3.解决问题html部分/防止页面被顶我们使用adjust-position属性<textarea name="" id=""...

2019-12-20 22:45:05 5158

原创手撸js进制转换

js进制转换思想根据原生方法tostring()栈（后进先出）因为刚好有空看了一下数据结构和算法，书中写到栈的应用，就拿来学习了一下,很简单的实现了一个栈/** * Stack 栈(后进先出) */;(function(w){ let items = new WeakMap(); class Stack{ constructor(){ items.set(this,[...

2019-10-20 12:55:11 559

原创 vue中实现验证码输入

vue验证码input输入解决焦点切换有点晚了就不吐槽了，咱还是把代码上了，赶紧洗澡，养好精神明天努力上班！！！想学node,想学react,想精进webpack,想vue学的更好一点，了解底层代码，学算法，学计算机原理，想写自己的博客网站…这是一条学无止境的路，没办法要恰饭效果html部分<div class="verifyCode"> <input ...

2019-07-18 22:51:26 1426

原创 vue滑块组件验证

vue滑块组件验证日常吐槽作为一个程序员的我，使用element发现没有，类似滑块组件验证的那种组件，我流下了无法使用轮子的眼泪，请element大佬多造一点组件可好，我们这种实习生切图切的慢哦，慢的话是要被开除的》》》后台开发需要一个滑块验证类似这种（这里用一下图，如果侵权请联系一下我）这里用一下别人的图，公司的不太方便贴出来代码这里主要使用了vue,原始js的一些事件，事件...

2019-06-29 14:17:02 14026 17

原创 vue卡片式点击切换图片组件

vue卡片式点击切换图片组件因为公司业务的问题，最近在写vue项目，有了一个卡片图片的点击的需求，自己又不想写动画效果，就偷个懒，采用vue是以数据驱动的原理，写了一个不太完整的vue组件，为了简单，就直接上代码吧全部代码未进行props传参设置，以后完善（简单最好嘛）<template> <!-- *以数据驱动的card式展示图片（无动画效果） * --&gt...

2019-06-15 13:56:00 5415

原创打造简洁优雅的自定义单选按钮：纯原生HTML、CSS与JavaScript实现

本文介绍了如何使用纯原生HTML、CSS和JavaScript实现自定义单选按钮组件。文章首先分析了原生单选按钮的局限性，提出自定义方案的优势：高度可定制、交互流畅和跨浏览器一致性。通过详细解析HTML结构、CSS样式和JavaScript交互逻辑，展示了如何构建美观实用的单选按钮，包括默认、选中和禁用状态的样式处理。最后提供了优化建议和应用场景，帮助开发者快速将此组件集成到项目中。该方案代码简洁、易于理解，适合不同水平的前端开发者参考使用。

2019-03-23 08:52:42 359

原创轻松打造自定义复选框：用纯原生HTML、CSS和JavaScript实现

摘要：本文介绍如何使用纯原生HTML、CSS和JavaScript实现自定义复选框组件。通过隐藏原生input元素，用span模拟复选框外观，结合类名切换实现选中状态样式变化。CSS定义复选框默认、选中和禁用状态，JavaScript动态生成视觉元素并处理交互逻辑。该方法解决了原生复选框样式单一的问题，支持个性化定制和跨浏览器一致性。文章包含完整代码实现、优化建议和应用场景，适合各层次开发者快速集成使用。

2019-03-23 08:45:39 700

原创打造实用数字输入框：纯原生HTML、CSS与JavaScript实现

本文介绍了如何使用纯原生HTML、CSS和JavaScript创建自定义数字输入框组件。相比原生<input type="number">，自定义实现具有样式灵活、交互优化和统一体验的优势。文章详细解析了实现思路：通过label包裹input作为容器，动态添加加减按钮；使用CSS去除原生箭头，设计美观样式；JavaScript处理按钮交互逻辑，控制数值边界。完整代码实现了一个可复用的数字输入框组件，支持最小/最大值设置和步进调整，适合直接应用于项目或作为学习参考。

2019-03-23 08:40:37 2498

前端结城的博客