2024年 07月 30日Vue3项目中实现“电梯”效果，快速实现锚点导航功能Vue3项目中实现“电梯”效果的锚点导航功能。该功能包括点击左侧导航后右侧内容区平滑滚动到对应位置，以及右侧内容区滚动到相应位置时左侧导航动态更新选中状态。实现方法结合了scrollIntoView和IntersectionObserver —如果您的项目中没有使用Hash路由，可以使用纯css实现，具体操作请参照 scroll-behavior 如果您的项目跟我目前一样，使用的是vue的Hash…
2024年 04月 15日Next.js中的基本状态管理这篇Blog提供了关于在 Next.js 中进行基本状态管理的综合指南。它涵盖了使用 useState 和 useReducer 进行本地状态管理，以及使用 Context API 进行全局状态管理的方法。此外，它还介绍了如何从外部 API 获取数据，并使用 SWR 简化数据获取和状态管理的过程。最后还探讨了 Next.js 中的中间件集成以及服务器组件中的状态管理技术。 —Next.js 中的基本状态管理 让我们从 Next.js 状态管理的基础开始。在接下来的章节中，我们将讨论基本的 Hooks、技术和工具，以便有效地管理状态。 使用 useState Hook 进行状态管理 useState Hook 是在传统的 React…
2023年 11月 12日减少 JavaScript 以提升网页性能在现代网站开发中，减少 JavaScript 的使用是至关重要的，也是整体页面效率的关键因素。随着软件工程的发展，对于更快速、更高效的网站以及整体 JavaScript 负载更小的需求一直存在。未使用的 JavaScript 会为你的 Web 应用程序增加不必要的负担，降低整体性能。 —本文将介绍一系列模式和技巧，帮助你通过去除未使用的 JavaScript 来减少这种负担，从而节省时间、优化性能并提高效率。 什么是未使用的 JavaScript？ 简而言之，未使用的 JavaScript，通常称为死代码，是指你的 Web…
2023年 08月 24日JavaScript 数组常用方法本文将针对JavaScript，详细介绍一系列常用的数组方法，涵盖了flatMap()、concat()、copyWithin()、every()、fill()、filter()、flat()、forEach()、shift()、includes() 以及 reduce()。通过掌握这些方法，您可以在实际开发中提高工作效率并改善代码质量。 —在JavaScript中，数组是一种常见且必不可少的数据结构，用于存储一系列值。数组方法是对数组进行操作和转换的强大工具。本文将详细解释一些常用的数组方法，包括concat()、copyWithin()、every()、fill()、filter()、flat()、forEach…
2023年 02月 22日Vue 3 Composition API 中的响应式特性：ref() 和 reactive()。在组合式 API 中，我们使用两个函数来定义状态，即 ref() 和 reactive()。在本文中，我们将探讨这两个函数，概述它们的独特之处，并学习何时应该使用它们。作为额外内容，我们还将了解如何解包 refs、监视它们的变化，并使用它们创建隐式引用。。 —在单页面应用程序（SPA）中，响应性指的是应用程序根据底层数据的变化能够更新其用户界面的能力。响应性使我们能够编写更清晰的代码，避免了我们需要手动根据数据变化来更新界面。相反，界面会自动更新。 然而，JavaScript 本身并不具备这种能力，因此我们可以通过像 React…
