夏天训练营-优快云博客

原创 Vue 3 响应式三剑客：ref vs reactive vs Proxy 原理全解析

Vue 3 的发布，带来了 Composition API 和基于Proxy的全新响应式系统。ref和reactive有什么区别？为什么ref要.value？为什么 Vue 3 不再需要Vue.set？今天，我们不看源码，而是从使用到原理，再到手写实现，带你彻底掌握 Vue 3 响应式的核心机制！场景推荐方案基础类型（number, string）ref复杂对象或表单reactive组合式函数返回值ref或toRefs需要解构响应式对象数组操作reactive（天然支持push。

2025-09-25 17:12:22 746

原创《JavaScript 事件循环（Event Loop）：从游乐场到源码》

为什么不是立即执行？为什么比setTimeout先执行？点击事件、定时器、网络请求，JS 是怎么“同时”处理的？这一切的背后，就是 JavaScript 的核心机制——事件循环（Event Loop）。今天，我们不用复杂术语，用一个“JS游乐场”的故事，带你轻松掌握事件循环！执行顺序类型同步代码立即执行微任务同步结束后立刻执行（全清）宏任务一轮只执行一个，再清微任务掌握事件循环，你就掌握了 JavaScript 的“心跳”！

2025-09-25 15:43:59 275

原创 [特殊字符] JavaScript 事件流完全指南：从捕获到冒泡，彻底搞懂事件机制

在前端开发中，事件是用户与页面交互的核心。但你是否曾被“事件流”、“冒泡”、“捕获”、“stopPropagation”这些概念绕晕？别担心！本文将用生活化比喻 + 代码实例，带你从零彻底搞懂 JavaScript 事件流机制，让你不再“似懂非懂”。当一个事件（如点击）发生时，它在 DOM 树中传播的完整路径。阶段说明捕获阶段（Capture Phase）事件从window→document→<html>→<body>→ 一路“冲进”目标元素（从外到内）目标阶段（Target Phase）

2025-09-24 16:24:59 590

原创 [特殊字符] Vue2 与 Vue3 虚拟 DOM 和 Diff 算法对比：从“老实工人”到“聪明工头”的进化之路

特性Vue2Vue3Diff 策略全量递归对比智能对比，只看动态节点静态节点处理每次都 diff提升复用，跳过对比更新粒度组件级节点级（更细）PatchFlag❌ 无✅ 有，标记动态类型事件缓存❌ 每次创建新函数✅ 编译器自动缓存性能良好更快，尤其大组件Vue2：数据一变，全树比对，老实但低效。Vue3：编译标记，精准更新，聪明又高效！Vue3 的性能提升，不只是Proxy的功劳，虚拟 DOM + Diff 算法的编译时优化才是隐藏的“大功臣”！虚拟 DOM 是“图纸”

2025-09-23 18:30:14 1522

原创预防xxs攻击

引用文本总结：防御XSS需要采取纵深防御策略，结合输入验证、输出编码、安全响应头（尤其是CSP）和安全的开发实践，才能有效降低风险。严格验证输入：对所有用户输入（包括表单、URL参数、Cookie等）进行严格的类型、长度、格式和范围验证。白名单过滤：优先使用白名单机制，只允许已知安全的字符或标签通过，而不是尝试过滤所有可能的恶意代码。HTML实体编码：用于HTML内容（如 <, >, &, " 应编码为 <, >, &, "）。URL编码：当数据用于URL时，进行URL编码。

2025-09-23 17:52:22 371

原创【无标题】

qunee 去除水印可以通过jq方法解决。// An highlighted block$($(".Q-Canvas")[1]).hide();

2022-03-14 11:35:15 167

原创如何解决border-radous 在ie的兼容性问题？

如今的ie是最令前端程序员头疼的！这不是，问题又出现了。如何解决border-radous 在ie的兼容性问题呢只要把这句代码加到你的页面就好啦！<!--[if IE]><style type="text/css">img, #testdiv, .testbox{behavior: url(rl(http://yourdomain.com/js/ie-css3.ht...

2018-10-12 15:55:30 243

原创通过canvas实现保存图片，

大家好，做前端一年多了最近跳槽到一家做电商公司，碰到问题大多都是之前公司从来没有遇到的过的T_T,好啦，大家还是看代码吧 .在做app时候有一个功能需要长按保存，大家都知道这个功能浏览器是可以自己实现的，但是如果是app的话，就不得不自己写了。1.css 这里提醒一下大家，因为我是用vue框架开发运行时要把css分开来写在这里插入代码片.hs{ transition ...

2018-09-27 17:12:24 1625 1

原创如何长按保存，代码展示

在这里插入代码片html <div class="delete-button-show" @touchstart="showDeleteButton" @touchend="clearLoop"> <div class="h" :class="{'delete-button-shows': isDeleting}">x</di

2018-09-27 10:40:02 1144

weixin_43284827的博客