- 博客(148)
- 收藏
- 关注
RSS订阅原创 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
391
原创 vue3源码分析 -- runtime
runtime运行时，主要在目录下，核心提供了hrender等函数。在理解它们之前，我们需要了解下HTML DOM 树和虚拟 DOM等概念。
2025-04-02 15:08:39
552
原创 vue3源码分析 -- watch
1）watch函数实际执行的是doWatch方法，调度器scheduler在watch中很关键2）scheduler两者之间存在互相作用的关系，一旦effect触发了scheduler，那么会导致执行，job方法就被塞入微任务的队列中3）只要job()触发，那么就表示watch触发了一次。
2025-03-29 17:18:05
1070
原创 vue3源码分析 -- computed
computed计算属性实际是一个ComputedRefImpl构造函数的实例ComputedRefImpl构造函数中通过_dirty变量来控制effect中run方法的执行和triggerRefValue的触发 - 初始时_dirty为true，表示计算属性的值尚未计算，需要重新计算 - 当值被计算并缓存后，_dirty设置为false - 当计算属性的依赖发生变化时，例如响应式数据被修改，_dirty重新设置为true，表示需要重新计算值
2025-03-21 10:04:47
1028
原创 微前端简介、注意事项及常见技术方案
微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用，各个前端应用还可以独立运行、独立开发、独立部署。实现微前端不管是采用什么方案，本质都是一样的，微前端各个部分之间相互独立、独立部署的能力本质是在允许构建孤立或松散耦合的服务。
2025-03-20 10:02:58
1087
原创 vue3源码分析 -- ref
ref函数本质上做了三件事返回RefImpl的实例对数据处理，如果当前数据为基本类型则直接返回；如果是为复杂类型则调用reactive返回reactive数据RefImpl提供get value和set value方法，这就是为什么设置ref值时，需要带上.value
2025-03-19 09:55:58
650
原创 vue3源码分析 -- reactive
reactive函数实际执行了createReactiveObject方法，该方法主要创建了一个Proxy实例对象，给代理对象添加了getter和setter行为getter和setter方法定义在mutableHandlers对象中，用于拦截对象属性的获取和设置操作
2025-03-18 09:38:05
1143
原创 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
595
原创 DOM -- 概念、类型、操作
DOM（Document Object Model）是文档内容（HTML或XML）在编程语言上的抽象模型，它建模了文档的内容和结构，并提供给编程语言一套完整的操纵文档的APIDOM 节点是 DOM 模型的组成单元。HTML 的基本单元是标签，节点常常与标签对应，但连续的文本内容也是一个文本标签DOM 树是 DOM 结构的表示形式，DOM 把文档的每个节点根据父子关系连接，形成 DOM 树
2025-03-06 10:07:25
1378
原创 JavaScript基础 -- 函数
函数实际上是对象，每个函数都是 Function 类型的实例，而 Function 也有属性和方法，跟其他引用类型一样因为函数是对象，所以函数名就是指向函数对象的指针，而且不一定与函数本身紧密绑定
2025-03-01 22:00:11
835
原创 JavaScript基础 -- 代理与反射
ES6 新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体地说，可以给目标对象(target)定义一个关联的代理对象，而这个代理对象可当作一个抽象的目标对象来使用。因此在对目标对象的各种操作影响到目标对象之前，我们可以在代理对象中对这些操作加以控制，并且最终也可能会改变操作返回的结果
2025-02-18 11:26:43
766
原创 从前端视角看设计模式之行为型模式篇
行为型模式关注对象之间的通信和交互，旨在解决对象之间的责任分配和算法的封装包括：责任链模式、命令模式、解释器模式、迭代器模式、中介者模式、备忘录模式、观察者模式、状态模式、空对象模式、策略模式、模板模式、访问者模式
2025-01-23 19:37:36
1410
原创 从前端视角看设计模式之结构型模式篇
上篇介绍了设计模式之创建型模式，接下来介绍设计模式之结构型模式，这些模式关注对象之间的组合和关系，旨在解决如何构建灵活且可复用的类和对象结构
2025-01-20 15:45:02
1022
原创 从前端视角看设计模式之创建型模式篇
"设计模式"源于GOF（四人帮）合著出版的《设计模式：可复用的面向对象软件元素》，该书第一次完整科普了软件开发中设计模式的概念，他们提出的设计模式主要是基于以下的面向对象设计原则：- 对接口编程而不是对实现编程- 优先使用对象组合而不是继承
2025-01-13 10:55:14
957
原创 JavaScript基础 -- 迭代器与生成器
循环是迭代机制的基础，因为它可以指定迭代的次数，以及每次迭代要执行什么操作。每次循环都会在下一次迭代开始之前完成，而每次迭代的顺序都是事先定义好的迭代会在一个有序集合上进行，"有序"可以理解为集合所有项都可以按照既定的顺序被遍历到，数组就是 JavaScript 中有序集合的最典型例子
2025-01-09 10:21:59
1032
原创 JavaScript基础 -- 变量、作用域与内存
原始值就是最简单的数据，引用值则是由多个值构成的对象。在把一个值赋给变量时，JavaScript引擎必须要确定这个值是原始值还是引用值原始值大小固定，保存在栈内存上；引用值是对象，存储在堆内存上
2025-01-02 17:31:59
837
原创 WebSocket | 背景 概念 原理 使用 优缺点及适用场景
WebSocket 是一种网络传输协议，可在单个 TCP 连接上进行全双工通信，它使得客户端和服务器之间的数据交换变得更加简单，只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输，本质上一种计算机网络应用层的协议，用来弥补 HTTP 协议在持久通信能力上的不足
2024-12-24 16:01:55
1407
1
原创 ECharts复杂业务：与tooltip的交互
想要用ECharts实现：鼠标可以进入图表的tooltip框，并点击其中的内容进行交互。实现这个过程中会遇到一些问题，下面是对其进行总结，并给出解决方案。
2024-10-12 09:59:44
797
原创 抛弃!important 使css优先级变大
在开发中很容易使用!important去增大优先级，这是不好的方法，那有没有更优雅的方式来实现我们覆盖的诉求呢？
2024-09-23 14:38:06
560
原创 Vue3 数据通信
数据在 vue 中是单向流动的，有利于管理数据状态和变化。而在日常组件开发中，难以避免组件之间的数据通信。组件通信可以分为不同的场景，例如父子组件通信、兄弟组件通信、跨层级组件通信等。
2024-09-03 16:29:55
1657
1
原创 JavaScript 运行机制
JavaScript 是单线程，H5 允许 JavaScript 创建多个线程，但是子线程受主线程控制，并且不能操作 DOM。所有任务分为同步任务和异步任务。
2024-08-15 10:07:13
912
原创 vite与webpack有什么不同？为什么vite比webpack快？
vite与webpack有什么不同？为什么vite构建速度比webpack快？
2024-04-16 22:23:59
1753
原创 面向对象基础
c 语言是面向过程的，面向过程就是把一件事按步骤一步一步来实现而 java、c++ 等是面向对象的，面向对象就是把现实问题抽象为对象，通过调用每个对象的属性或方法去解决问题
2024-04-13 15:14:25
524
原创 Javascript进阶内容
JavaScript的一些进阶内容：作用域、函数进阶、解构赋值、深入对象、内置构造函数、深入面向对象、深浅拷贝、异常处理、处理this、防抖节流
2024-04-08 19:54:27
1081
原创 常见typescript面试题
假设有一个导入语句：import { a } from “moduleA”（1）编译器通过绝对或相对路径，定位到需要导入的模块文件（2）如果上面解析失败了，没有查找到对应的模块，编译器会尝试定位一个外部模块声明（3）最后，还是不能解析这个模块，就直接抛出一个错误TS Map文件是一个源映射文件，其中有关原始文件的信息。.map是源映射文件，在JS代码和创建它的TS源文件之间进行映射调试调的是TS文件接口用于一个类的话，那接口会表示行为抽象对类的约束，让类去实现接口，类可以实现多个接口。
2024-03-26 11:25:08
1836
原创 发布-订阅模式
发布-订阅模式是一种设计模式，用于实现对象之间的松散耦合。在这种模式下，发布者和订阅者之间并不直接通信，而是通过中介者来进行交流。
2024-03-18 15:56:55
187
原创 会话跟踪及常用方法
- 会话：客户端打开与服务器的连接发出请求 到 服务器响应客户端请求的全过程- 会话跟踪：对同一个用户对服务器的连续请求和接收响应的监视- why：浏览器和服务器之间是通过**HTTP（无状态）协议通信**的，它不能保持客户的信息，一次响应之后连接就断开了，下一次请求还需要重新连接，需要**判断是否为同一用户**，因此会话跟踪就来实现这个要求了
2024-03-18 09:18:34
310
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人