俊刚、-CSDN博客

原创回顾2023，立2024flag

在过去的一年里，前端技术不断演进和创新。新技术、新框架层出不穷，给前端工程师提供了更多选择和挑战。2023年已经成为过去，回首这一年，我们也经历了许多挑战和成长。在这个充满变革和创新的行业中，我们不断追求技术的进步和个人的成长。现在，我们站在了2024年的门槛上，迎接着新的机遇和挑战。让我们一起制定2024 Flag，为自己设定新的目标，并努力实现它们。

2024-01-11 15:16:41 1811 46

原创浏览器的渲染流程

当我们在浏览器中输入然后发送内容，浏览器的网络线程会发送 *http* 请求，和服务器之间进行通信，之后将拿到的 *html* 封装成一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

2024-01-06 19:20:28 985 34

原创 Vue3 watch与watchEffect区别

在Vue3中，watch与watchEffect是两个非常重要的响应式API。它们可以用于监听数据的变化，并在数据变化时执行相应的操作。本文将详细介绍watch与watchEffect的用法及示例，并对它们进行总结。

2024-01-25 14:20:15 1693 17

原创 Vue3 Suspense 优雅地处理异步组件加载

Suspense是Vue3中新增加的一个组件，它可以用来处理异步组件加载过程中的等待状态和错误状态。在传统的Vue开发中，我们通常使用v-if或v-show来控制组件的显示与隐藏，但这种方式对于异步组件加载时的等待状态和错误处理并不友好。而Suspense则提供了一种更加优雅和简洁的方式来处理这些情况。

2024-01-24 11:06:28 1861 16

原创 Vue3 Teleport 将组件传送到外层DOM位置

Teleport的灵活性使得我们能够将组件的内容渲染到任何位置。无论是在同一个组件内部还是在不同的组件之间，我们都可以通过Teleport将内容渲染到所需的目标元素中。这使得我们能够更好地控制组件的布局和样式，并实现一些复杂的交互效果。

2024-01-24 10:54:53 1149

原创 Vue3 ref与reactive

Vue3带来了许多令人兴奋的新特性和改进。其中两个最重要的特性是ref和reactive。这两个特性使得在Vue应用程序中处理响应式数据变得更加简单和灵活。本文将详细介绍ref和reactive的实现原理、用法以及示例，并对其进行总结。

2024-01-23 18:59:29 1138 1

原创 Vue3 setup 介绍

Vue3是Vue.js的最新版本，带来了许多令人兴奋的新特性和改进。其中一个最引人注目的特性就是setup函数。setup函数是Vue3中一个全新的组件选项，它为我们提供了一种更简洁、更灵活的方式来编写组件逻辑。本文将详细介绍setup函数的用法及示例，并与Vue2进行对比，帮助读者更好地理解Vue3中的这一重要特性。

2024-01-23 18:45:03 1051

原创 Vue diff原理

在Vue.js中，diff算法是一个非常重要的概念，它用于比较虚拟DOM树和真实DOM树之间的差异，并将这些差异应用到真实DOM上，以提高渲染效率。本文将介绍Vue.js中的diff算法的流程、时机以及相关函数的作用。

2024-01-22 08:00:00 1354 21

原创 Vue 虚拟DOM

在前端开发中，DOM操作是非常常见的一种操作。然而，频繁的DOM操作会带来性能上的问题，因为DOM操作是一种相对较慢的操作。为了解决这个问题，虚拟DOM应运而生。本文将介绍什么是虚拟DOM，为什么需要虚拟DOM，以及虚拟DOM如何转换为真实的DOM。

2024-01-22 07:45:00 911 5

原创 Vue 组件通信方式

在Vue开发中，组件通信是一个非常重要的概念。当我们构建一个复杂的应用程序时，组件之间的通信是必不可少的。Vue提供了多种方式来实现组件之间的通信，本文将介绍常用的几种通信方式，并提供相应的代码示例。

2024-01-21 21:20:19 1322 1

原创 Vue 实例创建流程

通过源码角度分析，我们可以了解到Vue 2.x版本创建Vue实例的流程。首先，在创建Vue实例时，会进行初始化操作，并调用beforeCreate钩子函数。然后，进行数据观测和状态初始化，并调用created钩子函数。接下来，根据配置选项进行事件初始化和渲染相关操作。最后，如果指定了el选项，则将实例挂载到DOM上。

2024-01-21 21:04:39 1012

原创 Vue 生命周期

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它提供了一套完整的生命周期钩子函数，用于在不同阶段执行特定的操作。本文将详细介绍Vue的生命周期及特性。

2024-01-21 20:55:30 1341 24

原创 vite 打包优化

本文介绍了几种常见的打包优化技术和策略，包括代码压缩、文件合并、按需加载、懒加载等。通过对代码进行压缩和合并，可以减少打包文件的大小；通过按需加载和懒加载，可以提高应用程序的加载速度和性能。此外，还介绍了一些其他的打包优化技巧，如使用CDN加速、使用缓存等。这些技术和策略可以帮助开发者更好地优化自己的应用程序，提升用户体验。

2024-01-17 18:40:25 1714 19

原创 Vue Mixin 代码重用与逻辑共享

深入理解Vue Mixin：代码重用与逻辑共享在Vue.js开发中，我们经常会遇到需要在多个组件中共享相同逻辑的情况。为了避免重复编写代码并提高代码的可维护性，Vue提供了一种强大的工具——Mixin。本文将深入探讨Vue Mixin的概念、实现原理以及如何使用Mixin来实现代码重用与逻辑共享。

2024-01-17 13:20:18 1186 10

在Vue.js中，v-model是一个非常重要的指令，它可以实现双向数据绑定，使得数据的改变可以自动反映到视图上，同时用户在视图上的操作也可以自动更新到数据中。它可以用于在表单元素上创建双向数据绑定。通过使用v-model指令，我们可以将表单元素的值与Vue实例中的数据进行关联，从而实现数据的双向同步。本文将详细介绍v-model的使用方法和实现原理，并通过详细的使用示例来帮助读者更好地理解和应用v-model。

2024-01-16 13:00:54 1667 16

原创 Vue slot 插槽使用详解

Vue.js中的插槽是一个强大而灵活的功能，它允许开发人员在组件中定义可替换的内容。通过使用具名插槽和默认插槽，我们可以根据需要动态地替换组件的内容。插槽使得Vue.js成为构建可扩展和可定制的用户界面的理想选择。通过深入理解和灵活运用插槽功能，我们可以构建出高度复用和灵活性强的Vue.js组件。

2024-01-16 11:47:58 1339

原创 Vue keep-alive的使用和原理解析

通过使用Vue的keep-alive组件，我们可以方便地实现组件的缓存和复用，从而提高应用的性能和用户体验。我们可以通过将需要缓存的组件包裹在标签中来使用keep-alive，并且可以通过属性来进一步控制其行为。此外，我们还可以在被缓存的组件中定义生命周期钩子函数来处理特定的逻辑。在内部，Vue会维护一个缓存对象cache，用于存储被缓存的组件实例，并在切换时进行相应的处理。

2024-01-13 17:33:48 1326 13

原创 Vue中v-if与v-show区别详解

Vue.js 是一种流行的 JavaScript 框架，用于构建用户界面。它提供了一些指令，如 v-if 和 v-show，用于条件性地显示或隐藏元素。虽然这两个指令在功能上很相似，但它们在实现方式和使用场景上有一些区别。在本文中，我们将详细介绍 v-if 和 v-show 的区别，并提供一些使用建议。

2024-01-13 16:58:38 1381

原创资源提示关键词（defer 、async、preload、prefetch）

当浏览器解析HTML文档时，如果遇到一个普通的脚本标签（不带async或defer属性），浏览器会立即下载并执行该脚本，同时阻塞HTML解析过程。这意味着，如果脚本文件较大或者网络连接较慢，页面加载速度会受到影响。

2024-01-12 10:37:37 1376 6

原创 TypeScript进阶（四）声明文件

TypeScript 声明文件是使用 TypeScript 开发 JavaScript 库或模块的重要组成部分。通过编写准确、详细的声明文件，我们可以获得类型检查和智能提示的好处，提高代码的可靠性和可维护性。希望本文能够帮助读者更好地理解和使用 TypeScript 声明文件，并在实际项目中发挥它们的作用。

2024-01-12 10:32:57 795

原创 TypeScript进阶（三）类型演算与高级内置类型

本文深入探讨了 TypeScript 类型演算的原理和应用。通过使用类型演算，我们可以在编译时对类型进行操作和计算，从而提供更强大的类型系统。通过合理地运用类型推断、条件类型、映射类型等工具，我们可以编写更安全、更健壮的代码，并提高开发效率。希望本文能够帮助读者深入理解 TypeScript 类型演算，并在实际开发中得到应用。

2024-01-11 08:15:00 1022 2

原创 TypeScript进阶（二）深入理解装饰器

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，为 JavaScript 添加了静态类型检查和其他一些特性。装饰器是 TypeScript 中一个非常强大的特性，它可以用来修改类、方法、属性等的行为。本文将深入探讨 TypeScript 装饰器的原理和用法。

2024-01-11 08:00:00 918

原创程序员面试技巧：成为HR心动的程序猿

程序员必备的面试技巧，就像是编写一段完美的代码一样重要。在面试战场上，我们需要像忍者一样灵活，像侦探一样聪明，还要像无敌铁金刚一样坚定。只有掌握了这些技巧，我们才能在面试的舞台上闪耀光芒，成为那个令HR们心动的程序猿！

2024-01-10 10:19:04 880 6

原创 TypeScript进阶（一）深入理解类和接口

TypeScript 是一种静态类型的 JavaScript 超集，它提供了类和接口的概念，使得我们能够更好地组织和管理代码。在本文中，我们将深入探讨 TypeScript 类和接口的各种特性，包括类的继承、抽象类、静态成员、接口、索引器以及 this 指向约束。

2024-01-10 08:15:00 873

原创 TypeScript基础（五）泛型

在编程中，我们经常会遇到需要处理不同类型数据的情况。为了提高代码的复用性和灵活性，TypeScript引入了泛型的概念。泛型可以让我们在定义函数、类或接口时，不预先指定具体的类型，而是在使用时再指定类型。本文将详细介绍TypeScript中泛型的使用方法和技巧。

2024-01-10 08:00:00 954

原创 TypeScript基础（四）扩展类型 - 类

TypeScript是一种静态类型的编程语言，它是JavaScript的超集，可以编译成纯JavaScript代码。TypeScript引入了类的概念，使得开发者可以使用面向对象的方式来编写代码。本文将介绍TypeScript的类、继承、访问修饰符和访问器的用法。

2024-01-09 10:30:55 1229 7

原创 TypeScript基础（三）扩展类型-接口和类型兼容性

在TypeScript中，接口（Interface）用于定义对象的结构和类型。它是一种约定，用于描述对象应该具有哪些属性和方法。接口可以提高代码的可读性、可维护性和可重用性。接口的定义使用关键字`interface`，后面跟着接口的名称和一对花括号。在花括号中，可以定义接口的属性、方法和其他成员。

2024-01-09 10:29:15 971

原创深入了解pnpm：一种高效的包管理工具

pnpm是一种快速、高效且磁盘空间友好的包管理工具。它通过共享依赖来减少磁盘空间占用，并通过硬链接来加快安装速度。

2024-01-08 19:00:05 1623 2

原创深入了解Performance API：优化网页性能的利器

在现代Web开发中，优化网页性能是至关重要的。用户对于加载速度和交互性能的要求越来越高，而Performance API作为一组用于测量和监控网页性能的JavaScript接口，为开发者提供了丰富的工具和信息。本文将深入探讨Performance API的各个方面，帮助读者更好地理解和利用这一强大工具来优化网页性能。

2024-01-08 08:00:00 1001 2

原创 TypeScript基础（二）扩展类型-枚举及其位运算

TypeScript中的枚举（Enum）是一种数据类型，用于定义一组具有命名值的常量。枚举可以帮助我们在代码中使用更具有可读性和可维护性的常量。本文将介绍字面量类型的问题、类型别名的局限以及枚举的优缺点及示例详细说明枚举的用处,以及扩展知识`枚举的位运算`。

2024-01-07 12:56:05 975 2

原创 TypeScript基础（一）基本类型与类型运算

TypeScript是一种开源的编程语言，它是JavaScript的超集，意味着所有的JavaScript代码都可以在TypeScript中运行。TypeScript添加了静态类型检查和其他一些新特性，以提高代码的可读性、可维护性和可扩展性。

2024-01-07 12:53:07 1002

原创 VitePress搭建Vite官方中文文档首页

Vitepress是一个简单、快速和高效的静态网站生成器，它基于Vue.js和Vite构建工具。相较于Vuepress，Vitepress在性能和开发体验方面做出了一些优化。通过使用Vitepress，开发者可以更快速地构建静态网站，并享受到更好的开发体验。希望本文能够帮助你深入了解Vitepress，并在实际项目中应用它。

2024-01-05 08:00:00 867 3

原创极速 JavaScript 打包器：esbuild

esbuild是一个快速、可扩展的JavaScript打包器和压缩器，它的目标是成为最快的打包器。它使用Go编写，可以在几乎瞬间内完成大多数项目的构建。在本文中，我们将深入了解esbuild，并探讨其如何实现如此出色的性能。

2024-01-05 07:30:00 1074

原创 rollup 插件输出生成钩子

Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的插件输出生成钩子。

2024-01-05 07:00:00 995

原创生成式AI：开发效率的提升者

生成式AI作为一种新兴技术，正在迅速改变软件开发的方式。通过自动化和优化开发流程，它可以帮助开发人员更快地生成代码、测试和部署应用程序，从而提高开发效率和质量。本文将探讨生成式AI在代码生成、测试自动化和部署优化方面的应用，并讨论其对开发流程的影响。

2024-01-04 13:20:27 1150

原创 rollup 插件开发示例

Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的插件开发。

2024-01-04 10:38:38 1006

原创 rollup 插件机制

Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的插件机制。

2024-01-04 10:34:32 917 1

原创 rollup 常用配置

Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的常用配置的使用方法。

2024-01-04 10:31:54 838

原创 rollup 原理解析

Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的工作原理、使用方法、摇树优化(tree shaking)。

2024-01-03 11:49:02 1151 2

原创 CSS属性的计算过程和层叠规则总结

CSS属性的计算过程总的来讲，属性值的计算方法有下面 *4* 种，这也是属性值的计算顺序：- 确定声明值- 层叠冲突- 使用继承- 使用默认值

2024-01-03 08:00:00 1006

2023 Java面试真题及详解

1 mysql使用innodb引擎，请简述mysql索引的最左前缀如何优化orderby语句。 2 JVM 内存模型中，为什么要区分新生代和年老代，对于新生代，为什么又要区分eden 区survial区? 3 典型的JDBC程序按()顺序编写( 排序) 4 请编写一个Java类Testjava，求出100以内既能被2 除又能被3 除的数，并输出到控制台上 5 A 系统远程调用 B 系统的接口，A 系统在完成调用之后，需要更新A 系统本地表问题1:常见的远程调用有几种? 问题 2: 对于有这些外部衔接的方法需要注意哪些问题?请写出注意问题及伪代码 6 在如下代码中，当调用insertA 方法的时候，是否能做当insertA 到当调用insertB的时候，如果imnsertB 插入b表的时候有异常，能否保证 insertA0中的a 表插入成功，如果不能，应该如何修改。 7. springboot是如何管理版本依赖的？什么是自动配置、起步依赖? 8 数据库索引的原理?创建索引的缺点是什么，什么情况索引失效?优化数据库的方法有哪些? 9.Integer和int 的区别? ...

2023-12-28

TA关注的人

2023 Java面试真题及详解

卸载McAfee工具

angularjs插件batarang

react调试插件 2.5.1版本

vue项目谷歌调试插件

react开发调试插件与使用方法

翘边阴影的实现

有旋转动画的导航菜单栏源码

marquee滚动效果源代码

2D动画效果演示

CSS3 实现3D魔方旋转源码

html5淘汰了frameset，该用什么替代它？