卓卓没头发-CSDN博客

原创前端性能监控：提升用户体验的关键指标解析

精准监控：毫秒级精度采集关键性能指标问题诊断：快速定位资源加载、渲染阻塞等问题趋势分析：长期追踪性能变化，验证优化效果。

2025-05-22 00:43:52 969

原创个人对vue响应式原理的理解

valuewritableenumerablefor...ingetset如果定义了 get 或 set，则不能定义 value 或 writable。

2025-03-18 01:36:06 489 1

SSL/TLS 就像给数据穿上隐形斗篷，确保你的信息在互联网上传输时不会被小偷盯上！安全通信魔法： SSL/TLS 给 HTTPS 加持加密、验证和完整性保护，确保只有对的人能看到你的秘密信息。加密双雄组合：对称加密快如闪电，用来传输大量数据；非对称加密则像个保密大师，利用公钥（只能加密）和私钥（专用解密）解决密钥传输难题。握手仪式：客户端和服务器通过一系列像 ClientHello 和 ServerHello 这样的“见面礼”，协商出共同的秘密密码（会话密钥），开启安全对话。性能优化小窍门。

2025-03-09 22:42:03 854

原创 pnpm--他简直是超人！

pnpm简直完美，要我评价就是马中赤兔，人中卓卓！但是他还有一些不足之处，他毕竟太‘年轻’了，自然就会有生态不如老包管理工具的问题存在，就像上面说的，明明很鸡肋的hoist却能在pnpm中被保留就是为了解决部分兼容性问题，但是以pnpm超强的性能，使用它的人肯定会越来越多，对生态系统支持的兼容性问题被解决只是时间问题。

2024-12-22 02:12:13 768

原创年久失修！monorepo依赖管理失控补救方法

例如，如果包 A 和包 B 都使用了包 C，但各自独立地安装了包 C 而没有通过 workspace 管理共享这些依赖，就会导致冗余依赖。的 workspace 配置中，某些依赖没有正确提升到顶层，可能会导致每个子包都各自安装一份相同的依赖，而不是通过提升机制共享依赖。如果 hoisting 配置不当，某些依赖可能不会被提升到根目录，而是被分散在各个子包中，从而导致重复的依赖和包体积冗余。：检查项目中的无用依赖，并报告，如果有无用依赖，CI 会失败，提醒开发者清理。，确保只保留当前实际需要的依赖。

2024-12-10 23:57:53 1018

原创 github actions--最好的黑奴，帮你干脏活累活！

经常写代码的朋友们都知道，有很多固定的操作都是在固定的时机执行的（比如更新package.json后需要执行pnpm i），我们有时候却会忘记去执行，这样显然容易导致项目出错，有没有一种办法，把这些固定时机要执行的操作，让项目自动执行呢？GitHub CLI是 GitHub 提供的命令行工具，旨在帮助开发者直接从终端与 GitHub 平台交互。它提供了一种简洁的方式来执行 GitHub 上的常见任务，如创建仓库、管理问题、处理拉取请求、查看 Actions 状态等。安装和配置 GitHub CLI安装。

2024-12-10 11:19:11 807

原创 pnpm.lock.yaml，到底是干什么的？

pnpm-lock.yaml` 文件是 **pnpm** 包管理工具生成的一个 **锁定文件**，它在项目中起着重要的作用，类似于 `package-lock.json`（在 npm 中）和 `yarn.lock`（在 Yarn 中）。`pnpm-lock.yaml` 文件是 **pnpm** 包管理工具生成的一个 **锁定文件**，它在项目中起着重要的作用，类似于 `package-lock.json`（在 npm 中）和 `yarn.lock`（在 Yarn 中）。

2024-11-30 16:24:31 1762 3

原创 git push到main上了？我直接提桶跑路！（才怪）

而我们要是直接push到main上，无疑是少了很多测试与验证的环节，这时候代码就非常容易出错，个人开发还好，要是企业项目，有一点bug就可能要承受巨大的损失，所以，怎么避免，以及真push上去了该怎么补救，听我娓娓道来。1. **分支开发**：开发者从 `main` 分支拉取一个新的功能分支（feature/xxx）或修复分支（bugfix/xxx）。3. 找到 **Branch Protection Rules**（分支保护规则），点击 **Add Rule**。

2024-11-21 22:02:49 529 1

原创学webpack之loader原理，让面试官跪下来唱征服

众所周知，webpack是个只能识别js和json文件的小笨蛋，所以就要有loader来转换，让文件能被webpack识别到，从而顺利打包，loader还能对资源进行优化，如压缩图片，代码分割等loader像是个翻译官，把各种各样的文件翻译成webpack看得懂的样子，实际上是个导出函数。

2024-11-04 22:15:08 719

原创超详细的flex教程（面试必考）

<title>Flex 布局示例</title><style>.item2 {</style>项目 1</div><div class="flex-item item2">项目 2

2024-10-31 21:11:22 1091

原创深入理解 Webpack：现代前端开发的模块打包器

代码分割的目的是将应用程序的代码拆分为多个部分，使得用户在需要时可以按需加载这些部分，而不是一次性加载整个应用程序。这可以减少初始加载时间和资源消耗，尤其是在大型应用中。

2024-10-24 20:16:39 1070

原创奶茶在线小程序介绍

后台系统管理员：登录后台管理系统，拥有后台系统中所有的操作权限，对菜品、套餐、订单等进行管理C端用户：登录移动端应用，可以浏览菜品、搜索商品、添加购物车、设置地址、在线下单等。

2024-10-03 11:04:52 272

原创前端面试小知识（JS）

定义闭包是JavaScript中的一个核心概念，它允许一个函数访问并操作函数外部的变量。更具体地说，当一个内部函数被其外部函数返回并在其他地方被调用时，它仍然可以访问外部函数的变量，即使外部函数已经执行完毕。这些变量不会被垃圾回收机制回收，因为内部函数仍然持有对它们的引用。用途1.数据封装和隐私：闭包可以创建私有变量，因为它们只能通过闭包内部的函数访问。2.模块化代码：闭包可以帮助组织代码，将相关的功能封装在一起。3.维持状态。

2024-08-17 00:09:08 753 1

原创 TypeScript与面向对象编程

TypeScript是JavaScript的一个超集，由微软开发，它在JavaScript的基础上添加了类型系统和对ES6+的新特性的支持。TypeScript最终会被编译成纯JavaScript代码，以便在任何支持JavaScript的环境中运行。在TypeScript中，类是创建对象的蓝图。类定义了对象的属性和方法。TypeScript类的定义使用class关键字，可以包含属性、构造函数、方法等。// 类属性// 构造函数// 类方法greet() {

2024-07-21 20:23:42 1317

原创 TypeScript导学：从零开始

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集，添加了可选的静态类型和基于类的面向对象编程。自2012年首次发布以来，TypeScript因其能够提高代码的可读性、可维护性和可扩展性而迅速获得了广泛的认可。随着现代Web应用的复杂性日益增加，TypeScript提供了一种有效的方式来管理大型代码库，减少运行时错误，并提高开发效率。TypeScript的类型系统非常强大，它不仅支持基本的类型注解，还提供了许多高级类型特性，以支持更复杂的编程场景。

2024-07-18 21:18:05 1215

原创深入异步JavaScript：掌握Promises与async/await

异步编程在JavaScript中是处理耗时操作（如网络请求、定时任务）而不阻塞用户界面的关键。

2024-07-16 22:34:07 1577

原创 Vue 3 组件通信与状态管理：从基础到Pinia的全面解析

自定义事件在Vue中用于父子组件间的通信。父组件通过监听子组件发出的自定义事件来接收数据或执行某些操作。使用自定义事件：在中，使用来声明可以触发的事件，并在模板中使用v-on（或简写为）来监听这些事件。-- 父组件 --><template>// 输出: Custom event data</script>-- 子组件 --></script>

2024-07-15 23:21:45 1005

原创 Element Plus 与 Vue 3：构建现代化 Web 应用的完美搭档

Element Plus 是一个专为 Vue 3 设计的组件库，它继承了 Element UI 的优秀基因，提供了丰富的 UI 组件，帮助开发者快速构建高质量的用户界面。

2024-07-14 23:07:44 1311 1

原创 Vue 3 组合式 API 指南：响应式状态管理与跨组件通信

Vue 3 的组合式 API 通过setup函数提供响应式状态管理，支持使用ref和reactive创建响应式数据，computed和watch处理计算属性和侦听器。同时，provide和inject允许跨组件进行依赖注入，实现数据和方法的共享。这些特性提升了代码的组织性、可重用性以及组件间的解耦。希望这篇文章能帮助到你。

2024-07-13 23:34:36 1084

原创 Vue Router 4：构建高效单页面应用的路由管理

在文件中，使用函数创建路由实例，并定义路由规则。路由规则定义了应用中的页面路径和对应的组件。path: '/',},},// 其他路由规则...routes,});在Vue Router中，路由是通过一个数组来定义的，每个路由对象可以包含多个属性来描述路由的行为和结构。path: '/home', // 路径name: 'Home', // 命名路由component: Home, // 要渲染的组件props: true, // 是否将路由参数作为props传递给组件。

2024-07-12 23:20:33 1537

原创掌握axios与Vue 3：构建高效HTTP请求的终极指南

axios是一个基于Promise的HTTP客户端，用于浏览器和node.js环境中。它允许开发者以一种简洁的方式发送异步HTTP请求到REST endpoints，并处理响应。axios支持请求和响应拦截器、自动转换JSON数据、客户端支持防御XSRF等特性。axios是一个功能强大的HTTP客户端库，它使用Promise来处理异步请求，非常适合在Vue 3项目中使用。

2024-07-11 22:35:38 1343

原创 Vue 3 组件通信全解：从基础到高级技巧

在前端开发中，组件可以被看作是构建用户界面的独立单元。它封装了特定的功能和样式，可以被重复使用，并且可以独立于其他部分进行开发和测试。组件的主要作用是提高代码的复用性、可维护性和可扩展性。通过将界面拆分成多个组件，开发者可以更容易地管理复杂的应用程序，并且可以针对每个组件进行优化，从而提高整体的开发效率和应用性能。Vue 3 引入了 Composition API，为组件通信带来了新的灵活性和强大的功能。

2024-07-10 22:50:50 1604

原创 Vue 3与Pinia：下一代状态管理的探索

Pinia 是一个为 Vue.js 设计的状态管理库，它在 Vue 3 中得到了官方的支持。Pinia 的设计目标是提供一个简单、轻量级且可扩展的状态管理解决方案，它旨在替代 Vuex 4，后者是 Vue 2 的官方状态管理库。Pinia 的设计哲学是尽可能地简化状态管理，同时保持足够的灵活性以适应各种规模的应用。Pinia 提供了一个强大的插件系统，允许开发者扩展其功能。创建自定义插件可以让你添加全局状态、拦截actions、添加全局getters等。1.创建插件。

2024-07-09 23:33:57 1268

原创掌握Vue 3生命周期：从组合式API到高效代码实践

Vue 3 引入了新的生命周期钩子和改进了现有的生命周期管理方式，以适应组合式 API 的引入。生命周期钩子是 Vue 组件中用于控制组件在不同阶段执行特定逻辑的函数。了解这些钩子对于构建高效和可维护的 Vue 应用程序至关重要。Vue 3 的生命周期钩子是构建高效和可维护 Vue 应用程序的关键。它们允许开发者在组件的不同生命周期阶段执行特定的逻辑，从而控制组件的行为和性能。正确理解和使用这些生命周期钩子，对于编写高质量的 Vue 代码至关重要。

2024-07-08 23:05:57 1086 1

原创掌握Vue插槽：创建灵活且可复用的组件

Vue插槽主要分为两种类型：具名插槽（Named Slots）和作用域插槽（Scoped Slots）。1.具名插槽具名插槽允许开发者为组件内的插槽指定一个名称，父组件可以通过这个名称向子组件传递内容。在子组件中，使用标签并指定一个name属性来定义具名插槽。父组件在使用子组件时，通过标签的slot属性指定要插入的内容应该放在哪个具名插槽中。2.作用域插槽作用域插槽允许子组件向父组件传递数据，使得父组件可以根据子组件提供的数据来决定如何渲染插槽内容。

2024-07-07 22:58:19 944

原创揭秘 Vue 组件通信：构建响应式数据流

Vuex 是一个第三方库，需要通过 npm 或 yarn 安装到你的项目中。bash复制# 或者父子组件通信通过 props 传递数据，实现单向数据流。使用 $emit 方法传递事件和数据。使用 v-model 实现双向绑定。非父子组件通信使用 Event Bus 作为中央事件总线。创建和实例化 Event Bus。使用 𝑒𝑚𝑖𝑡和emit和on 进行事件传递和监听。Vuex 状态管理介绍 Vuex 及其核心概念。使用 Vuex 进行组件通信的示例。

2024-07-06 21:40:06 1513

原创探索Vue Router：构建高效单页面应用的指南

动态路径参数以冒号开头，它们类似于正则表达式的占位符，用于捕获 URL 的一部分。routes: [// 动态路径参数以冒号开始});在这个例子中，任何形式的/user/x都会映射到同一个路由，其中x可以是任何值。当匹配到路由时，x的值会被存储在中。Vue Router 是 Vue.js 的官方路由管理器，为构建单页面应用（SPA）提供支持。它通过定义路由规则，将 URL 映射到不同的组件，实现页面内容的动态渲染和切换，而无需重新加载页面安装 | Vue Router。

2024-07-05 22:33:40 1561 1

原创开发者工具攻略：前端测试的极简指南

许多人存在一个常见的误区，认为测试只是测试工程师的工作。实际上，测试是整个开发团队的责任，每个人都应该参与到测试过程中。在这篇博客我尽量通俗一点地讲讲我们前端开发过程中，该如何去测试开发者工具是前端开发中一个强大的工具集，它可以帮助开发者调试、分析、测试和监控网页。Console：用于输入JavaScript代码，执行调试语句，查看控制台输出等。Elements：用于查看和编辑页面上的HTML元素，包括元素属性、样式和事件监听器。Network：用于跟踪和分析网络请求，查看响应内容，检查加载时间等。

2024-07-04 23:15:20 1109

原创 Vuex 核心揭秘：打造高效前端状态库

状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。

2024-07-03 23:56:01 1296

原创 Vue技巧大揭秘：自定义指令的力量与应用

Vue自定义指令允许开发者封装DOM操作逻辑，全局和局部注册提供了灵活性。指令钩子在不同生命周期操作DOM，参数和修饰符增强了指令的定制能力。这些特性有助于创建高效、可维护的自定义指令。

2024-07-02 22:35:00 1217

原创 Vue Router的深度解析

Vue Router是一个专为Vue.js应用程序设计的路由管理器。它允许开发者在单页应用中构建复杂的页面路由逻辑，通过定义URL和组件的映射关系，实现页面的动态加载和导航。Vue Router的核心。

2024-07-01 23:45:35 1139

原创前端面试必备：深入解析Vue.js中v-if与v-show的原理与应用

在Vue.js中，条件渲染是一个核心的概念，它允许我们根据数据的状态来动态地显示或隐藏元素。v-if和v-show是Vue.js提供的两个最常用的条件渲染指令，它们在表面上看起来很相似，但实际上在背后的工作原理和适用场景上有着显著的差异。作为前端开发者，理解v-if和v-show的区别不仅能够帮助我们更好地使用Vue.js构建高效的应用，也是面试中常见的问题，能够考察我们对框架深层次工作机制的理解。接下来，我们将一起探索这两个指令的奥秘，为你的前端面试之旅增添一份自信。v-if和v-show的基本概念。

2024-06-30 22:46:54 954

空空如也

空空如也