软弹-CSDN博客

原创快速了解前端中的跨域问题

同源需要满足三个完全一致协议一致（如 http /https，不能混合）域名一致（如和不同源）端口一致（如和不同源）目标资源地址是否同源原因是协议、域名、端口完全一致否协议不同（http vs https）否端口不同（8080 vs 3000）否域名不同（localhostvs跨域问题的核心是浏览器同源策略跨域产生的原因：浏览器同源策略限制，前后端分离、第三方接口调用是最常见场景；

2026-04-13 17:34:31 448

输入URL之后：URL解析 --> 检查本地缓存 --> DNS域名解析 --> TCP连接 --> 浏览器发出请求 --> 服务器返回响应 --> 浏览器渲染页面 --> 满足条件后TCP断开连接需要掌握的：浏览器查询缓存的过程DNS域名解析HTTP报文组成，常见的请求头、响应头字段TCP的三次握手、四次挥手浏览器渲染的过程进阶：浏览器的缓存机制DNS域名解析HTTP的跨域、缓存控制TLS的握手和挥手。

2026-04-04 21:03:44 483

原创深入理解 React Ref 机制：useRef 与 forwardRef 的协作原理

虽然声明式很优雅，但它无法处理所有场景。// ❌ 这样写没用！// 设置 isFocused = true 并不会让输入框真正聚焦// 因为聚焦是浏览器的行为，不是 React 的状态浏览器行为指的是那些瞬时的、副作用的、无法通过状态驱动的操作：浏览器行为说明为什么声明式无法处理focus()blur()聚焦/失焦这是瞬时动作，不是状态滚动到指定位置这是视口行为select()选中文本这是编辑器行为play()pause()播放/暂停媒体这是媒体控制行为Canvas 绘图。

2026-03-22 09:43:17 453

原创 Vue2、Vue3、React 状态管理全方位对比

结合实际开发场景，给出以下选型建议，避免盲目跟风：若使用 Vue2 开发：组件内用 data()，全局状态用 Vuex，无需纠结其他方案，优先保证项目稳定；若需升级，可先迁移到 Vue3 + Pinia。首选 Composition API（ref + reactive）管理组件内状态，Pinia 管理全局状态，语法简洁、性能优，且是官方推荐，长期维护有保障。若使用 React 开发：小型项目（组件少、无复杂共享状态）：仅用 useState + useReducer，无需全局状态；

2026-03-15 11:06:11 515

原创一分钟了解React中的hooks

自定义 Hooks 是封装可复用逻辑的函数，本质是多个内置 Hooks 的组合，命名必须以 use 开头。示例：封装请求数据的自定义 Hook// 自定义 Hook：复用请求数据的逻辑// 取消请求的控制器try {if (!res.ok) throw new Error('请求失败');== 'AbortError') { // 排除取消请求的错误// 清理函数：组件卸载时取消请求}, [url]);// 返回状态和数据，供组件使用。

2026-03-02 13:14:35 1126

原创项目开发中git代码合并全流程解析

以上就是基于GitLab平台，从个人feature分支开发完成，到最终合并代码至develop分支的完整流程——核心逻辑是“本地自检→同步团队代码→解决冲突→GitLab提交MR→审核修改→合并验证”，每一步都需严谨操作，既要保障个人代码的正确性，也要兼顾团队协作的规范性。其实代码合并的核心不是“执行命令”，而是“规范协作”，尤其是在多人协作项目中，遵循GitLab分支规范、MR审核规范，才能减少代码冲突、提升开发效率，避免因合并操作不当导致项目异常。

2026-02-08 20:58:04 730

原创 Vue2 的数据响应式原理&&给实例新增响应式属性

摘要：本文通过Vue2案例演示了响应式原理的实现机制。当直接添加user.age属性时，虽然能成功赋值但不会触发视图更新，因为Vue2使用Object.defineProperty()进行数据劫持，无法拦截新增属性。核心组件包括Observer（数据劫持）、Dep（依赖收集）、Watcher（更新执行）和VNode/Patch（视图更新）。解决方案推荐使用Vue.set/this.$set方法或数组变异方法实现响应式更新，并解释了其工作原理。文章还提供了简化版的响应式实现代码，展示了Vue2如何通过依赖收集

2026-01-24 09:17:31 685

原创 Vue2 - Dep到底是什么？如何简单快速理解Dep组件

那么也就是说，Dep是一个中间商，负责实现和Watcher的双向联系，构建data和watcher的桥梁。之所以需要Dep，是因为，Data被多个watcher依赖；watcher又依赖多个Data。于是乎，为了方便管理这种多对多的复杂关系，就需要Dep将这些信息收集起来进行统一管理。

2025-12-27 08:40:09 394

原创 Vue2-虚拟DOM树和虚拟节点

虚拟节点是一个普通 JavaScript 对象，包含描述真实 DOM 节点的所有关键信息（标签名、属性、子节点、内容等），是对真实 DOM 的抽象描述。虚拟 DOM 树是以根 VNode 为起点，所有子 VNode 嵌套组成的树形结构，完全映射真实 DOM 的层级关系。简单来说，无论是虚拟DOM树或者虚拟节点，都是前端框架为了模拟真实DOM框架的手段。核心目的都是为了利用JS对象来代替真实的DOM操作虚拟节点（VNode）：包含了一个DOM节点的一切关键信息，并通过一种特定的结构罗列出来。

2025-12-20 08:39:14 900

原创 Vue2响应式数据的核心方法

Object.defineProperty() 是 JavaScript 中用于精确控制对象属性行为的核心方法，它允许你为对象定义新属性，或修改已有属性的特性（如是否可枚举、可修改、可删除等），是实现数据劫持（如 Vue 2 响应式）的基础。总结就是，Object.defineProperty（）是Vue2用来将data中的属性定义存取描述符（getter/setter）实现数据拦截的方法。configurable：是否可配置（能否删除属性 / 修改描述符，默认 false）

2025-12-14 10:30:04 316 1

原创 Vue2 项目实战避坑指南：ESLint、Vant、Yarn 版本冲突全解析

确认 Vue 版本：Vue2 项目需锁定vue@2.6.14（稳定版）；查看依赖文档：Vant、ESLint 等工具需确认 Vue2 适配版本（如 Vant2、eslint-plugin-vue@7.x）；选择包管理器：初始化项目时统一用 NPM 或 Yarn，避免混用。

2025-12-06 11:33:12 936

原创 MVVM和数据驱动视图的原理

MVVM是Model-View-ViewModel的简写。本质上是MVC的改进版，MVVM，其中的View是视图状态及行为抽象化出来，Model去实现业务逻辑，而ViewModel作为中枢，实现视图UI和业务数据的更新。简单来说——数据驱动试图，让数据变成“响应式”，数据变化时自动触发视图自动变化。MVVM 把前端应用拆分为 3 个核心部分，本质是解耦数据、视图、业务逻辑角色作用对应前端场景Model数据层：存储 / 管理业务数据（纯数据，无 UI 逻辑）如 Vue 中的data。

2025-11-29 10:29:12 791

原创浅拷贝/深拷贝--理解、实现

在了解浅拷贝和深拷贝之前，先区分与的区别（string、number、boolean、null、undefined、Symbol）：值直接存储在，值本身不会受引用的影响。（对象（{}）、数组（[]）、函数、Map/Set）：栈内存存，实际数据存在。

2025-11-22 16:59:46 652

原创 1.原型与构造函数

在ES6（2015年发布）引入class的语法之前，JavaScript 中并没有原生的类概念，而是通过和机制来实现类似 “类” 的功能。

2025-11-16 14:53:45 290

原创前端页面跳转的六个方法

top.window.location.href是覆盖顶层地址跳转，在iframe嵌套内页跳转可以覆盖顶层地址打开新页面，且浏览器无拦截。top.window.location.replace()使用效果和top.window.location.href效果一样，可以在iframe中使用，且浏览器无拦截。url=http://www.w3school.com.cn"中的5代表5秒，url代表跳转地址。window.open与top.window.open效果是一样的，都是新窗口打开页面；

2025-11-09 09:02:32 503

原创《NeteaseCloudMusicApi 项目依赖安装避坑指南》

问题类型错误原因避坑要点命令拼写错误npm istall少写n（全拼 “install”）模块缺失（如 express）依赖未安装或安装中断镜像源错误（ENOTFOUND）缓存残留旧源（npm config set registry 新源；2. 手动删缓存文件夹解压文件夹名无效解压路径含特殊字符先解压到D:\temp，重命名后再移动到 node_modules高版本兼容性问题Node.js v25+ 与部分依赖不兼容。

2025-11-01 14:56:47 790

原创 Fetch

axios({ method: 'get', // 请求方法（默认 get） url: 'https://api.example.com/data', // 请求地址 params: { id: 123 }, // GET 参数（拼接到 URL） timeout: 5000 // 超时时间 }).then(response => console.log(response.data));传统Ajax的是基于 XMLHttpRequest（XHR）实现的，是前端异步请求的基础，兼容性极佳。

2025-10-25 21:27:24 1012

原创深拷贝与浅拷贝

在 JavaScript 中，浅拷贝（Shallow Copy）和深拷贝（Deep Copy）用于描述复制对象时的不同行为，核心区别在于是否复制对象的深层嵌套结构。定义：完全复制对象的所有层级结构，包括嵌套的对象 / 数组，拷贝后两者完全独立，修改互不影响。特点：拷贝后的对象与原对象彻底分离，适合处理复杂的嵌套数据。定义：只复制对象的表层属性，对于嵌套的对象 / 数组，只复制其引用（内存地址），不复制实际内容。特点：修改拷贝后对象的嵌套属性，会影响原对象。2. 深拷贝（Deep Copy）

2025-10-18 08:39:07 205

原创 CSS实现背景渐变效果

在 CSS 中，渐变效果主要通过 linear-gradient()、radial-gradient()、conic-gradient() 这几个函数实现，它们可以作为 background-image 的值来使用。

2025-10-12 09:06:24 1016

原创事件监听类型总结

事件类型的选择需根据。

2025-09-30 21:11:49 719

原创获取DOM元素节点的常用方法

方法返回类型动态性适用场景单个元素通过唯一 ID 获取动态（实时更新）按类名 / 标签名批量获取，需实时反映 DOM 变化单个元素复杂选择器匹配第一个元素NodeList静态（不实时更新）复杂选择器批量获取，性能稳定querySelector 和 querySelectorAll 因支持 CSS 选择器语法，使用最灵活；而 ID 选择器（getElementById）效率最高。

2025-09-26 21:16:54 283

原创 mate标签

Meta 标签是放在 HTML 文档区域中的代码，它们不直接显示在页面上，但为浏览器、搜索引擎和其他网络服务提供了关于网页的元数据（metadata）。：为搜索引擎提供一组与页面内容相关的关键词。<meta name="keywords" content="meta标签, HTML, SEO, 视图窗口, 字符编码">me="description" content="这是一个关于常用HTML meta标签及其作用的详细说明页面。<meta name="author" content="你的名字">

2025-09-19 17:45:00 405

2301_80148385的博客