- 博客(165)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vue2的scoped 原理
Vue 2 的 Scoped CSS 通过 PostCSS 插件实现样式隔离，核心原理是为组件 DOM 添加唯一 data-v-xxxx 属性并重写 CSS 选择器。编译时，Vue 为组件元素添加唯一哈希属性，同时在样式规则后追加对应的属性选择器，确保样式只作用于当前组件。通过深度选择器（>>>//deep/）可实现子组件样式穿透。这种方法既能避免样式污染，又保持了选择器权重不变，是 Vue 组件化开发中实现 CSS 隔离的高效方案。
2025-07-22 22:02:20
412
原创 Vue 3 中调用子组件方法
维度Vue 2Vue 3优势组件模型类实例模型函数作用域模型更好的 Tree-shaking访问控制开放所有方法白名单暴露机制增强封装性响应式追踪全实例追踪精准依赖追踪减少不必要的渲染内存占用组件实例较大轻量级代理提升大型应用性能TS 支持类型推导困难精准类型推断开发体验提升💡架构演进本质：从 “组件即对象” (OOP) 到 “组件即函数” (FP) 的范式转变，体现了现代前端框架向函数式、组合式、类型安全方向的发展趋势。
2025-07-16 15:21:21
458
原创 如何理解flex: 1 1 50%
flex: 1 1 50%是CSS Flexbox布局的简写属性，包含三个参数：flex-grow:1（有剩余空间时按比例放大）、flex-shrink:1（空间不足时按比例缩小）和flex-basis:50%（初始尺寸为容器宽度的50%）。该属性使元素既能保持50%的基础宽度，又能根据容器尺寸动态伸缩。典型场景中，两个设置该属性的子元素将平分父容器空间，当容器尺寸变化时会自动调整大小。
2025-07-15 22:00:17
380
原创 打造自己的组件库（三）打包及发布
无模块化 (全局污染) ->伪模块化 (IIFE/命名空间) ->服务端模块化 (CommonJS) ->浏览器异步模块化 (AMD) ->兼容方案 (UMD) ->语言标准模块化 (ES Modules) ->构建工具统一生态 (Bundlers)Vite 的双引擎架构是“开发求速，生产求稳”Esbuild以极致性能加速开发流程（预构建、编译、压缩），牺牲部分功能换取秒级响应。Rollup以成熟生态保障生产包质量（代码分割、加载优化），并通过插件机制与 Esbuild 协同。
2025-07-11 10:36:02
638
原创 打造自己的组件库（二）CSS工程化方案
根据 .browserslistrc 自动为 CSS 添加 -webkit-、-ms- 等前缀，保证兼容主流浏览器。PostCSS 是一个强大的 CSS 处理工具，可以通过插件链实现自动加前缀、现代特性降级、压缩优化等功能。你可以直接使用现代 CSS 语法和特性（如嵌套、变量、容器查询等），无需手动添加前缀或考虑兼容性。：让你可以直接写现代 CSS（如嵌套、逻辑属性、容器查询等），自动降级为目标浏览器支持的语法。：生产环境下压缩 CSS，移除注释、空格、重复代码等，极大减小体积。
2025-07-09 15:17:57
769
原创 打造自己的组件库（一）宏函数解析
这篇文章介绍了Vue 3项目初始化和自定义组件开发的流程。首先通过npm创建Vite项目，展示了标准项目目录结构。然后详细讲解了如何开发一个Button组件，包括组件模板、TypeScript类型定义和宏函数的使用。重点剖析了Vue 3的宏函数特性，包括defineProps、defineEmits、defineExpose、defineOptions等核心宏函数的作用、用法和编译原理，对比了宏函数与普通函数的区别。文章采用技术文档风格，包含代码示例、类型定义和流程图说明，适合Vue开发者学习组件化开发和宏
2025-07-08 16:18:02
792
原创 num = [1, 2, 3] 输出 123,132,213,312,231,321
我们有一个数组 [1,2,3]，需要输出所有排列，输出的是123,132,213,312,231,321。
2025-07-04 15:05:58
129
原创 前端如何实现大文件上传
/将全部切片push到chunksData中。//这里的地址可以替换为你的后端地址。// 获取元素并添加类型断言。// 将所有切片并发传给后端。
2025-07-04 11:53:20
346
原创 vue3中Pinia
Pinia 是 Vue 官方推荐的轻量级状态管理库，专为 Vue 3 设计，具有以下核心特点：采用扁平化 Store 架构，无需模块嵌套；直接通过 actions 修改状态，省去 Mutation 步骤；原生支持 TypeScript，提供完整类型推断；体积仅 1KB，性能优于 Vuex。与 Vuex 相比，Pinia 减少了 40% 样板代码，状态修改流程更简洁（组件→Action→State），模块化设计更直观。其原理基于 Vue 响应式系统，通过 reactive() 实现状态响应式，并利用 prov
2025-07-02 18:19:20
842
原创 Vue3 中watch和computed
computed用于派生状态具有缓存机制适合数据转换和格式化模板中优先使用watch用于执行副作用提供精确控制适合异步操作、DOM操作需要显式声明依赖自动追踪依赖立即执行适合多个依赖的简单副作用提供清理机制黄金法则需要派生值→ 用computed需要响应变化执行操作→ 用watch或需要精确控制依赖→ 用watch需要自动追踪多个依赖→ 用避免在computed中产生副作用总是在副作用中清理资源。
2025-07-01 17:55:01
592
原创 Vue3 Lifecycle Hooks
Vue 3生命周期钩子分为Options API和Composition API两种方式。Composition API通过setup()替代了beforeCreate和created，提供onBeforeMount、onMounted等更直观的钩子。主要阶段包括：创建阶段(setup)、挂载阶段(onMounted)、更新阶段(onUpdated)和卸载阶段(onUnmounted)。最佳实践包括在onUnmounted中清理资源、避免在onUpdated修改状态、在onMounted后操作DOM等。Co
2025-07-01 11:45:32
482
原创 如何在Vue3中正确使用ref和reactive？
Vue3响应式系统核心要点：ref适合基本类型和需要重新赋值的对象，模板自动解包；reactive适合复杂对象和直接修改属性的场景。关键区别在于数据访问方式（.value vs直接访问）和响应性保持（解构时ref更稳定）。最佳实践包括：组合式函数中混合使用，表单处理时嵌套结构，用toRefs保持解构响应性。建议基本类型优先用ref，复杂对象用reactive，避免同一数据源混用两种方式。合理选择可充分发挥Vue3响应式优势。
2025-06-30 22:28:54
293
原创 Vue3 script setup
Vue3的<script setup>是一种编译时语法糖，将代码转换为标准setup()函数。它简化了组件开发：自动暴露顶层绑定、支持响应式数据（如ref和reactive）、组件通信（defineProps和defineEmits）、依赖注入和生命周期钩子。还提供动态组件、异步组件和组件实例暴露等高级功能。相比选项式API，它更利于代码组织和类型支持。最佳实践包括拆分逻辑、使用TypeScript和显式依赖。适用于复杂状态管理，但不与setup()混用。
2025-06-29 10:05:24
665
原创 Vue3 Composition API
Vue 3 的 Composition API 通过提供基于函数的、灵活的逻辑组织方式，彻底解决了 Vue 2 Options API 在复杂组件开发和逻辑复用上的痛点。它不是取代 Options API，而是提供了一种更灵活、更强大的替代方案，尤其适合大型项目或逻辑复杂的组件。是一套全新的代码组织方式，旨在解决 Options API 在处理复杂组件逻辑时可能出现的。的代码，是构建现代 Vue 应用的强大工具集。
2025-06-29 10:03:36
821
原创 Vue3 Compiler 优化细节
Vue 3 编译器引入多项优化策略提升性能：1) 静态提升 - 将纯静态节点提取复用，减少重复创建；2) 补丁标志 - 标识动态元素属性，只更新变化部分；3) 树结构拍平 - 将动态节点收集为线性列表，减少递归遍历；4) 缓存事件处理 - 避免不必要的函数重建；5) SSR优化 - 静态内容直接序列化。这些优化通过动静分离和靶向更新机制，显著提高了渲染效率，特别对含大量静态内容或复杂结构的模板效果明显。开发者无需额外操作即可享受这些性能提升。
2025-06-29 10:02:20
505
原创 全面拥抱vue3
优化维度关键技术性能提升幅度核心优势响应式系统Proxy 替代 defineProperty200%初始化更快、内存更小虚拟DOMPatch Flags + 静态提升300%更新更精准、跳过静态比较编译优化树结构打平 + 缓存150%减少运行时开销组件实例精简内部结构40%内存占用更小组合式API按需引入 + Tree-shaking50%打包体积更小服务端渲染静态提升 + 流式渲染300%TTFB 更低、吞吐量更高运行时优化调度算法100%
2025-06-28 15:52:29
615
原创 TypeScript开发实践
枚举(Enums)定义命名常量集合支持数字、字符串和异构类型使用常量枚举优化编译输出接口(Interfaces)定义对象结构和契约支持函数、可索引和类实现通过继承创建复杂类型层次泛型(Generics)创建可重用类型组件支持函数、接口和类结合约束、条件类型和映射类型实现高级模式大幅提高代码类型安全性增强代码抽象和复用能力提供更智能的IDE支持改善大型项目的可维护性实现复杂类型操作和模式。
2025-06-28 15:09:15
960
原创 针对前端vue2项目中,优化需要加载多张图表的页面
/ 目标元素可见比例达到 10% 时触发回调。// todo 这里可进行接口调用等。// observe 方法一定要写对。
2025-06-27 10:40:43
840
原创 固定高度虚拟滚动列表
是一种前端性能优化技术，用于在渲染大量列表数据时，只渲染可视区域内的元素，而不是一次性渲染全部数据。这种技术显著减少了DOM元素数量和计算开销，从而提升页面性能和用户体验。
2025-06-26 22:10:22
888
原创 浏览器渲染原理
回流必然导致重绘：当发生回流时，浏览器需要重新计算元素的几何属性，然后重新绘制这些元素，因此回流必然会导致重绘。重绘不一定导致回流：如果只是修改元素的外观属性（如颜色），不会影响布局，只会触发重绘。首先，我们需要定义一个自定义元素。在这个例子中，我们将创建一个名为的按钮元素。super();// 调用父类的constructor// 创建一个shadow root// 使用HTML模板来填充shadow DOM<style>button {/* 绿色 */
2024-09-05 21:39:37
1566
原创 前端性能优化
是指在用户使用网页或前端应用程序的过程中，通过一系列的策略和方法，使得页面加载速度更快，提升用户的操作反馈速度，从而为用户带来更好的使用体验的过程。
2024-08-28 22:53:44
1107
原创 合并两个有序链表
将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。输入：l1 = [1,2,4], l2 = [1,3,4]输入：l1 = [], l2 = [0]输入：l1 = [], l2 = []输出：[1,1,2,3,4,4]
2023-11-28 23:56:19
190
原创 环形链表问题
如果链表中有某个节点，可以通过连续跟踪 next 指针再次到达，则链表中存在环。为了表示给定链表中的环，评测系统内部使用整数 pos 来表示链表尾连接到链表中的位置（索引从 0 开始）。输入：head = [3,2,0,-4], pos = 1。给你一个链表的头节点 head ，判断链表中是否有环。输入：head = [1,2], pos = 0。解释：链表中有一个环，其尾部连接到第二个节点。解释：链表中有一个环，其尾部连接到第一个节点。输入：head = [1], pos = -1。
2023-11-27 22:56:00
183
原创 三数之和问题
给你一个整数数组 nums ，判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i!= k ，同时还满足 nums[i] + nums[j] + nums[k] == 0。不同的三元组是 [-1,0,1] 和 [-1,-1,2]。输入：nums = [-1,0,1,2,-1,-4]输出：[[-1,-1,2],[-1,0,1]]解释：唯一可能的三元组和不为 0。输入：nums = [0,1,1]输入：nums = [0,0,0]输出：[[0,0,0]]
2023-11-26 22:11:07
327
原创 无重复字符的最长子串
请注意，你的答案必须是 子串 的长度，“pwke” 是一个子序列，不是子串。给定一个字符串 s ，请你找出其中不含有重复字符的 最长子串 的长度。解释: 因为无重复字符的最长子串是 “abc”，所以其长度为 3。解释: 因为无重复字符的最长子串是 “wke”，所以其长度为 3。解释: 因为无重复字符的最长子串是 “b”，所以其长度为 1。输入: s = “abcabcbb”输入: s = “pwwkew”输入: s = “bbbbb”
2023-11-25 21:27:36
162
原创 长度最小的子数组
找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl+1, …, numsr-1, numsr] ，并返回其长度。输入：target = 11, nums = [1,1,1,1,1,1,1,1]输入：target = 7, nums = [2,3,1,2,4,3]给定一个含有 n 个正整数的数组和一个正整数 target。输入：target = 4, nums = [1,4,4]解释：子数组 [4,3] 是该条件下的长度最小的子数组。
2023-11-24 23:34:39
151
原创 字母异位词分组
输入: strs = [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”]输出: [[“bat”],[“nat”,“tan”],[“ate”,“eat”,“tea”]]给你一个字符串数组，请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。字母异位词 是由重新排列源单词的所有字母得到的一个新单词。输入: strs = [“a”]输入: strs = [“”]输出: [[“a”]]输出: [[“”]]
2023-11-23 23:06:49
507
原创 合并区间问题
以数组 intervals 表示若干个区间的集合，其中单个区间为 intervals[i] = [starti, endi]。输入：intervals = [[1,3],[2,6],[8,10],[15,18]]解释：区间 [1,3] 和 [2,6] 重叠, 将它们合并为 [1,6].解释：区间 [1,4] 和 [4,5] 可被视为重叠区间。输入：intervals = [[1,4],[4,5]]输出：[[1,6],[8,10],[15,18]]输出：[[1,5]]
2023-11-22 23:06:21
593
原创 N 字形变换
之后，你的输出需要从左往右逐行读取，产生出一个新的字符串，比如：“PAHNAPLSIIGYIR”。将一个给定字符串 s 根据给定的行数 numRows ，以从上往下、从左到右进行 Z 字形排列。输入：s = “PAYPALISHIRING”, numRows = 3。输入：s = “PAYPALISHIRING”, numRows = 4。输入：s = “A”, numRows = 1。输出：“PAHNAPLSIIGYIR”输出：“PINALSIGYAHRPI”
2023-11-21 00:16:04
186
原创 整数转罗马数字
数字 1 在数字 5 的左边，所表示的数等于大数 5 减小数 1 得到的数值 4。例如， 罗马数字 2 写做 II ，即为两个并列的 1。X 可以放在 L (50) 和 C (100) 的左边，来表示 40 和 90。解释: M = 1000, CM = 900, XC = 90, IV = 4.I 可以放在 V (5) 和 X (10) 的左边，来表示 4 和 9。罗马数字包含以下七种字符： I， V， X， L，C，D 和 M。解释: L = 50, V = 5, III = 3.
2023-11-19 22:34:19
320
原创 两数之和 II - 输入有序数组
如果设这两个数分别是 numbers[index1] 和 numbers[index2] ，则 1 <= index1 < index2 <= numbers.length。以长度为 2 的整数数组 [index1, index2] 的形式返回这两个整数的下标 index1 和 index2。因此 index1 = 1, index2 = 2。返回 [1, 2]。因此 index1 = 1, index2 = 2。输入：numbers = [2,7,11,15], target = 9。
2023-11-18 23:14:07
154
原创 反转字符串中的单词
注意：输入字符串 s中可能会存在前导空格、尾随空格或者单词间的多个空格。返回的结果字符串中，单词间应当仅用单个空格分隔，且不包含任何额外的空格。s 中使用至少一个空格将字符串中的 单词 分隔开。解释：如果两个单词间有多余的空格，反转后的字符串需要将单词间的空格减少到仅有一个。返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。给你一个字符串 s ，请你反转字符串中 单词 的顺序。解释：反转后的字符串中不能存在前导空格和尾随空格。输入：s = “a good example”
2023-11-17 21:35:00
192
原创 汇总区间问题
返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表。也就是说，nums 的每个元素都恰好被某个区间范围所覆盖，并且不存在属于某个范围但不属于 nums 的数字 x。给定一个 无重复元素 的 有序 整数数组 nums。输出：[“0”,“2->4”,“6”,“8->9”]输入：nums = [0,2,3,4,6,8,9]输入：nums = [0,1,2,4,5,7]输出：[“0->2”,“4->5”,“7”]“a->b” ，如果 a!“a” ，如果 a == b。
2023-11-16 22:11:00
465
原创 存在重复元素 II
给你一个整数数组 nums 和一个整数 k ，判断数组中是否存在两个 不同的索引 i 和 j ，满足 nums[i] == nums[j] 且 abs(i - j)
2023-11-15 20:53:56
110
原创 快乐数问题
然后重复这个过程直到这个数变为 1，也可能是 无限循环 但始终变不到 1。如果 n 是 快乐数 就返回 true；不是，则返回 false。对于一个正整数，每一次将该数替换为它每个位置上的数字的平方和。如果这个过程 结果为 1，那么这个数就是快乐数。编写一个算法来判断一个数 n 是不是快乐数。
2023-11-14 22:56:09
187
原创 两数之和问题
给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。解释：因为 nums[0] + nums[1] == 9 ，返回 [0, 1]。你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。输入：nums = [2,7,11,15], target = 9。输入：nums = [3,2,4], target = 6。输入：nums = [3,3], target = 6。
2023-11-13 21:48:14
157
原创 有效的字母异位词
注意：若 s 和 t 中每个字符出现的次数都相同，则称 s 和 t 互为字母异位词。给定两个字符串 s 和 t ，编写一个函数来判断 t 是否是 s 的字母异位词。输入: s = “anagram”, t = “nagaram”输入: s = “rat”, t = “car”
2023-11-12 21:54:41
195
原创 单词规律问题
这里的 遵循 指完全匹配，例如， pattern 里的每个字母和字符串 s 中的每个非空单词之间存在着双向连接的对应规律。输入: pattern = “abba”, s = “dog cat cat dog”输入:pattern = “abba”, s = “dog cat cat fish”输入: pattern = “aaaa”, s = “dog cat cat dog”给定一种规律 pattern 和一个字符串 s ，判断 s 是否遵循相同的规律。
2023-11-11 23:02:02
703
原创 同构字符串
每个出现的字符都应当映射到另一个字符，同时不改变字符的顺序。不同字符不能映射到同一个字符上，相同字符只能映射到同一个字符上，字符可以映射到自己本身。如果 s 中的字符可以按某种映射关系替换得到 t ，那么这两个字符串是同构的。输入：s = “paper”, t = “title”给定两个字符串 s 和 t ，判断它们是否是同构的。输入：s = “egg”, t = “add”输入：s = “foo”, t = “bar”
2023-11-11 21:32:43
155
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人