ZoeLandia-优快云博客

原创 Vue 项目 JSON 在线编辑、校验如何选？

摘要：本文对比了四种JSON编辑方案，重点推荐svelte-jsoneditor方案。该方案支持可视化编辑、格式化、JSON Schema校验等功能，通过动态生成结构模板实现字段锁定。文中提供了Vue3实现代码，包含数据加载、Schema生成、编辑器初始化和保存校验等核心逻辑。其他方案如vue-json-pretty功能较弱，vue-json-editor和vue3-json-editor存在中文输入问题。

2025-09-29 15:09:08 1504

原创 Echarts -- ZRender 源码分析

ZRender是ECharts的底层2D图形绘制引擎，支持Canvas/SVG/VML三种渲染方式（5.0版本已放弃VML）。它采用MVC架构设计：数据层（Storage）管理图形数据及缓存视图层（PainterBase）提供基础绘制能力控制层（Handler）处理用户交互事件核心模块包括动画管理、工具类、图形对象及其辅助算法。源码结构清晰，包含图形元素基类、渲染器实现、事件代理等核心组件。入口文件zrender.ts提供实例管理接口，支持初始化、删除、注销等操作，并可扩展自定义渲染器。该系统实现了

2025-08-18 11:46:57 837

原创 nginx实战分析

本文介绍了Nginx的下载安装、配置说明及常用命令。主要内容包括：Windows环境下Nginx的安装启动方法；Nginx目录结构及各配置文件功能说明（如conf、logs、html等文件夹）；详细解析了nginx.conf文件的全局块、events块、http块、server块和location块的结构与作用；提供多个配置示例；最后列举了常用的Nginx操作命令，如reload、stop、quit等，并简要说明静态资源部署方法。文章可作为Nginx入门使用指南。

2025-08-15 11:31:15 1143

原创 Vue中v-if为何报属性undefined的错

Vue中v-if指令遇到dataForm.unknowData.version报错的原因是当unknowData为undefined/null时访问其version属性会抛出TypeError。解决方案包括：1)初始化时确保数据存在；2)使用&&运算符检查dataForm.unknowData && dataForm.unknowData.version；3)在Vue3中使用可选链操作符dataForm.unknowData?.version。这些方法都能有效避免访问未定义对

2025-08-07 10:16:52 611

原创 Webpack 搭建 Vue3 脚手架详细步骤

本文介绍了如何使用Webpack和Vue3搭建前端项目。首先通过npm初始化项目并安装Vue、Webpack及相关依赖，然后创建项目结构包括Vue组件、入口文件和HTML模板。接着配置Webpack处理Vue文件、JavaScript、CSS和图片资源，并设置开发服务器。最后添加构建脚本，可通过npm run dev启动开发服务器或npm run build生成生产环境代码。整个过程涵盖了从项目初始化到开发构建的完整流程，为Vue3项目提供了基础配置方案。

2025-08-04 14:48:42 647

原创 Vite基本概念及实现原理

Vite是一款基于原生ESM的前端构建工具，由开发服务器和构建指令两部分组成。其核心优势在于极速冷启动和高效热更新(HMR)，通过原生ESM支持实现按需编译，开发速度比传统打包工具快数倍。实现原理上，Vite利用浏览器原生ESM特性动态加载模块，使用Rollup进行生产环境打包，并通过WebSocket实现实时热更新。服务器启动后会解析请求、转换模块并监听文件变化，当文件修改时通过HMR机制局部更新而无需刷新页面。这种架构使Vite在项目规模增大时仍能保持快速构建。

2025-07-30 11:35:55 963

原创 Webpack基本概念及核心流程

Webpack是一个现代JavaScript应用的静态模块打包工具，它通过构建依赖关系图将各种资源（如JS、CSS、图片等）打包成静态文件。核心功能包括模块打包、依赖管理、文件转换、代码拆分和插件扩展。Webpack工作流程分为三个阶段：初始化阶段（参数处理、创建编译器）、构建阶段（递归解析依赖，调用loader转译模块）和生成阶段（输出打包结果）。通过配置entry、output、loader、plugin等选项，Webpack可以实现高效的资源管理和优化，支持多种文件类型的转换和按需加载，大大提升了前端

2025-07-29 10:59:39 872

原创前端自动化测试：Jest、Puppeteer

Jest和Puppeteer是前端测试的两种主流工具：Jest专注于单元测试，提供简洁API和快速执行；Puppeteer适用于端到端测试，通过真实浏览器模拟用户操作。Jest学习曲线平缓但浏览器模拟有限，Puppeteer功能全面但资源消耗较大。实际应用中，单元测试保证代码基础质量，端到端测试验证整体流程，二者可结合使用以获得更全面的测试覆盖。选择工具时应根据项目需求，平衡测试粒度与执行效率。

2025-07-18 16:35:11 631

原创 css实现文字渐变效果

文字渐变效果实现与问题解决摘要：使用-webkit-background-clip: text可实现文字渐变效果，需配合color: transparent。当设置固定高度后渐变变淡，原因是文字位置偏移导致只显示部分渐变。解决方案是使用line-height代替height，确保文字垂直居中，如父容器高20px时设置line-height: 20px，既能防止文字溢出，又能保持渐变效果完整。

2025-06-19 18:06:40 441

原创前端flex、grid布局

Flex布局是一种弹性盒子模型，用于实现网页在不同设备上的自适应展示，主要概念包括弹性容器（父元素）、弹性项目（子元素）以及主轴和侧轴。关键属性包括：flex-direction（定义主轴方向）、justify-content（主轴对齐方式）、align-items（侧轴对齐方式）和flex-wrap（换行设置）。网格布局它将网页划分成一个个网格，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格。

2025-06-06 17:12:33 1275

原创 HTML5新特性

HTML5引入了多项重要特性：1)语义化标签(nav、section等)优化文档结构；2)增强表单功能，新增日期/搜索等输入类型及验证属性；3)原生支持音视频(支持多种格式)；4)两种绘图方案：Canvas(像素级)和SVG(矢量图形)；5)地理定位API获取用户位置；6)拖放API实现元素交互；7)WebWorker创建多线程；8)WebStorage(5M容量)替代Cookie存储；9)WebSocket实现全双工通信。这些特性显著提升了Web应用的交互体验和功能丰富性。

2025-06-03 15:17:37 798

原创 Vue中 toRaw 和 markRaw 的使用

Vue提供了toRaw()和markRaw()方法处理响应式数据转换。toRaw()用于获取响应式对象的原始版本，操作原始对象不会触发页面更新。markRaw()则标记对象不被响应式系统处理，适用于静态数据或性能优化场景。需注意：toRaw不解除响应式，markRaw对已响应式对象无效；嵌套对象可能存在身份不一致问题，原始版本与代理版本可能不同。合理使用这些方法可优化性能，但需谨慎处理对象引用关系。

2025-05-30 11:24:45 656

原创 vue3源码分析 -- h

1）核心是处理shapeFlag赋值，之后在中又通过shapeFlag和type根据按位或运算，重新对shapeFlag赋值 2）h函数本质上是对四个属性处理childrenpropsshapeFlagtype和的增强。

2025-05-06 16:57:01 724

原创 Element UI 设置 el-table-column 宽度 width 为百分比无效

Element UI 设置 el-table-column 宽度 width 为百分比无效，原因是el-table 组件会被 vue 解析成 html，vue 直接把百分号去掉把数值当做列宽来呈现，所以，width 设置百分比的值直接被解析去掉百分号% 变成 px 了

2025-04-08 18:20:30 1567

原创 vue3源码分析 -- runtime

runtime运行时，主要在目录下，核心提供了hrender等函数。在理解它们之前，我们需要了解下HTML DOM 树和虚拟 DOM等概念。

2025-04-02 15:08:39 647

原创 vue3源码分析 -- watch

1）watch函数实际执行的是doWatch方法，调度器scheduler在watch中很关键2）scheduler两者之间存在互相作用的关系，一旦effect触发了scheduler，那么会导致执行，job方法就被塞入微任务的队列中3）只要job()触发，那么就表示watch触发了一次。

2025-03-29 17:18:05 1209

原创 vue3源码分析 -- computed

computed计算属性实际是一个ComputedRefImpl构造函数的实例ComputedRefImpl构造函数中通过_dirty变量来控制effect中run方法的执行和triggerRefValue的触发 - 初始时_dirty为true，表示计算属性的值尚未计算，需要重新计算 - 当值被计算并缓存后，_dirty设置为false - 当计算属性的依赖发生变化时，例如响应式数据被修改，_dirty重新设置为true，表示需要重新计算值

2025-03-21 10:04:47 1138

原创微前端简介、注意事项及常见技术方案

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用，各个前端应用还可以独立运行、独立开发、独立部署。实现微前端不管是采用什么方案，本质都是一样的，微前端各个部分之间相互独立、独立部署的能力本质是在允许构建孤立或松散耦合的服务。

2025-03-20 10:02:58 1478

原创 vue3源码分析 -- ref

ref函数本质上做了三件事返回RefImpl的实例对数据处理，如果当前数据为基本类型则直接返回；如果是为复杂类型则调用reactive返回reactive数据RefImpl提供get value和set value方法，这就是为什么设置ref值时，需要带上.value

2025-03-19 09:55:58 748

原创 vue3源码分析 -- reactive

reactive函数实际执行了createReactiveObject方法，该方法主要创建了一个Proxy实例对象，给代理对象添加了getter和setter行为getter和setter方法定义在mutableHandlers对象中，用于拦截对象属性的获取和设置操作

2025-03-18 09:38:05 1276

原创 vue3.2.37源码调试步骤

本教程详细介绍了基于Vue3.2.37版本进行本地环境配置与源码调试的全流程。首先需通过npm全局安装pnpm（需Node.js≥16.5.0），使用pnpm安装项目依赖，并在package.json的build命令中添加-s参数开启sourcemap生成。若遇到非Git仓库报错，需执行git init初始化仓库并提交代码。完成构建后需验证dist目录是否生成vue.global.js及其.map文件用于源码映射。随后在examples目录创建learning子目录并编写测试HTML文件

2025-03-07 15:43:03 668

原创 DOM -- 概念、类型、操作

DOM（Document Object Model）是文档内容（HTML或XML）在编程语言上的抽象模型，它建模了文档的内容和结构，并提供给编程语言一套完整的操纵文档的APIDOM 节点是 DOM 模型的组成单元。HTML 的基本单元是标签，节点常常与标签对应，但连续的文本内容也是一个文本标签DOM 树是 DOM 结构的表示形式，DOM 把文档的每个节点根据父子关系连接，形成 DOM 树

2025-03-06 10:07:25 1941

原创 JavaScript基础 -- 函数

函数实际上是对象，每个函数都是 Function 类型的实例，而 Function 也有属性和方法，跟其他引用类型一样因为函数是对象，所以函数名就是指向函数对象的指针，而且不一定与函数本身紧密绑定

2025-03-01 22:00:11 895

原创 JavaScript基础 -- 代理与反射

ES6 新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体地说，可以给目标对象(target)定义一个关联的代理对象，而这个代理对象可当作一个抽象的目标对象来使用。因此在对目标对象的各种操作影响到目标对象之前，我们可以在代理对象中对这些操作加以控制，并且最终也可能会改变操作返回的结果

2025-02-18 11:26:43 849