**又是一年时光转，岁月如梭学习繁。** **笔耕岁月求知路，心悟真谛志愈坚。** **往昔耕耘结硕果，未来展望展宏愿。** **共聚一堂话成就，再创辉煌谱新篇。** 此刻，我暂且搁下手中的键盘，让思绪飘回那过往的日日夜夜。回望这一年的风雨兼程，心中不禁涌动着无尽的感慨。前端领域，这片充满无限可能的天地，又经历了一轮轰轰烈烈的蓬勃发展与变革。新技术如雨后春笋般涌现，旧框架在不断迭代中焕发新生，这一…
又是一年时光转，岁月如梭学习繁。
笔耕岁月求知路，心悟真谛志愈坚。
往昔耕耘结硕果，未来展望展宏愿。
共聚一堂话成就，再创辉煌谱新篇。
此刻，我暂且搁下手中的键盘，让思绪飘回那过往的日日夜夜。回望这一年的风雨兼程，心中不禁涌动着无尽的感慨。前端领域，这片充满无限可能的天地，又经历了一轮轰轰烈烈的蓬勃发展与变革。新技术如雨后春笋般涌现，旧框架在不断迭代中焕发新生，这一切都让我对这份事业充满了无尽的热爱与敬意。
同样是在这流转的一年里，我踏上了ZEEKLOG技术博主的星辰大海之旅，愿以我余温之烛，照亮同行者的征途，期盼自己能成为ZEEKLOG夜空中那颗即便只刹那闪耀，亦能点亮梦想的星辰。
2024 年，React 继续稳坐前端框架的'流量顶流'位置。这一年，React 18 的自动批处理更新机制、并发流及服务端组件等新特性，提升了性能与应用场景,React 的更新重点围绕性能优化、开发效率提升以及更深入的服务端渲染（SSR）集成，让开发者们的工具箱更上一层楼。
useOptimistic 钩子，使得乐观更新的实现变得更加容易。同时，React 对 Suspense 的回退处理进行了优化，使得加载时的占位状态（Fallback）更加细腻，页面切换时更自然。React.lazy 进行了优化，提高了动态加载组件的效率。useTransition 和 useActionState 钩子，显著简化了复杂的异步操作管理。setState。这意味着多次执行 setState 只会触发一次渲染过程，减少了不必要的渲染次数。// Server 端组件exportdefaultasyncfunctionUserProfile({ userId }){const user =awaitfetch(`/api/user/${userId}`).then(res=> res.json());return<div>{user.name}</div>;}// 客户端集成<UserProfile userId="123"/>
onCaughtError、onUncaughtError 和 onRecoverableError 等新的错误处理机制，为开发者提供了更细粒度的错误捕获和管理能力。增强的样式表和脚本管理
React DevTools 的更新
开发必备神器！！！！
版本更新：React DevTools 在2024年进行了多次更新，其中最为重要的版本个人认为是React DevTools 6.0.0（发布于 2024 年 9 月 27 日） Server Components 的调试功能成为亮点。
综上所述，2024年React框架在性能、开发效率、异步操作管理和服务端渲染等方面进行了多项重要的优化和功能支持。这些更新不仅提升了React应用的性能和稳定性，还为开发者提供了更强大的工具和更便捷的开发体验。
Vue 2 生命周期结束：2023 年底，Vue 2 停止开源维护，2024 年标志着 Vue 2 生命周期的正式完结，这促使开发者向 Vue 3 及更高版本过渡，需要及时迭代相关技能;
1. Vue 3.3
v-memo，用于优化性能。v-for 指令渲染大量项目。当某个项目的状态（例如选中状态）发生变化时，如果不使用 v-memo，整个列表都会重新渲染。而使用 v-memo 后，只有状态发生变化的项目才会重新渲染，从而提高性能。<template><div v-for="item in list":key="item.id" v-memo="[item.selected]"><p>ID:{{ item.id }}- selected:{{ item.selected }}</p><p>...more child nodes</p></div></template><script>exportdefault{data(){return{list:[{id:1,selected:false},{id:2,selected:false},]};}};</script>
2. Vue 3.4
defineModel是一个新的<script setup>宏，旨在简化支持v-model。v-model修饰符的使用提供了更好的支持。v-bind语法，例如：<img :id="id" :src="src" :alt="alt">可以简写为<img :[id]="id" :[src]="src" :[alt]="alt">。3. Vue 3.5
defineProps宏时进行属性解构，而不会损失响应性。useId函数，为服务端渲染和客户端渲染生成唯一且稳定的ID。
提到前端开发框架，我相信大家第一时间想到的就是 Vue、React 和 Angular 三大主流。毕竟它们各个都是 GitHub 上 10w+ star 的知名项目，每个前端工程师至少要学习其中一个框架。
但是，最近几年，一个新的前端框架逐渐出现在人们眼前，它就是后起之秀『 Svelte 』。目前已经 8w+ 个 star，虽然暂时无法撼动三大主流框架的霸主地位，但是其恐怖的 star 增速，值得我们关注和思考。
Svelte 的核心思想在于'通过静态编译减少框架运行时的代码量'。他指出，传统框架如 React、Angular 或 Vue，在使用时都需要引入框架本身的运行时（runtime）。而 Svelte 则不同，一个 Svelte 组件编译后，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，不再需要额外引入一个框架运行时 —— 尤雨溪
Svelte 比较有优势的地方在于编译可独立分发的 Web Components。传统框架和 Web Components 结合时，运行时是一个问题。单独分发的 Web Components 如果直接打包框架运行时，会导致每个组件都要复制一份框架；如果不打包，又做不到开箱即用。而 Svelte 受这个问题的限制最小，可以说是最适合这个用例的框架。
Svelte 是一种新兴的前端 JavaScript 框架，它的主要特点是在构建阶段进行大量的优化工作，将组件的模板编译为高效的原生 JavaScript 代码，从而避免了运行时的虚拟 DOM（Virtual DOM）开销。这种独特的编译策略使得 Svelte 应用在性能方面具有显著的优势，尤其是在加载速度和运行效率上。
Svelte 的组件语法相对简洁。一个基本的 Svelte 组件通常由三个部分组成：script标签用于定义组件的逻辑，包括变量、函数和响应式语句；style标签用于定义组件的样式，并且支持样式的局部作用域，避免样式冲突；最后是组件的模板部分，用于描述组件的 DOM 结构。
例如，以下是一个简单的 Svelte 组件示例，用于显示一个欢迎消息：
<script>let name ='World';</script><h1>Hello {name}!</h1><style> h1 {color: blue;}</style>
加载速度快
由于 Svelte 在编译时就将模板转换为高效的 JavaScript 代码，避免了在浏览器中加载和解析大量框架代码的过程。在应用启动时，Svelte 应用可以更快地展示初始内容，减少用户等待时间。
特别是在移动设备或者网络条件较差的环境下，这种加载速度的优势更加明显。例如，一个简单的 Svelte 移动应用在首次加载时，能够比同类型的其他框架应用更快地呈现出界面，提升用户体验。
运行时性能高
没有虚拟 DOM 的开销使得 Svelte 在运行时的性能表现出色。在处理复杂的用户交互和频繁的 DOM 更新场景下，Svelte 能够直接更新真实 DOM，减少了中间环节的性能损耗。
例如，在一个具有大量实时数据更新的仪表盘应用中，Svelte 能够快速响应数据变化，准确地更新对应的 DOM 元素，使得仪表盘的指针、图表等元素能够及时、流畅地显示最新数据。
生态：
Svelte 的生态系统在不断发展壮大。虽然相对 React 和 Vue 等成熟框架，其生态规模较小，但已经有了一系列的插件、组件库和工具。例如，Svelte Material UI 是一个基于 Svelte 的材质设计组件库，为开发者提供了丰富的 UI 组件，方便构建美观、一致的用户界面。
还有 SvelteKit，它是一个用于构建全栈 Svelte 应用的框架，提供了诸如路由、服务端渲染（SSR）、静态站点生成（SSG）等功能，帮助开发者更加方便地构建复杂的应用。
开发工具支持：
主流的代码编辑器如 VS Code 对 Svelte 有良好的支持。通过安装 Svelte 相关插件，可以获得语法高亮、代码自动补全、错误提示等功能。在构建工具方面，Svelte 与 Rollup、Webpack 等集成良好，能够方便地进行项目的打包和构建.
2023年5月2号Builder 官方Qwik 研发团队对外宣布 追求极致性能的前端框架Qwik 1.0 正式发布。
| Qwik | Vue | React | |
|---|---|---|---|
| 渲染机制与性能优化 | 采用 Resumable Streams 技术，支持服务器端预渲染和客户端按需加载。通过减少 JavaScript 的下载和执行量来优化性能。 | 使用虚拟 DOM，通过差异算法高效更新 DOM。提供动态组件和异步组件等优化手段。 | 使用虚拟 DOM，通过差异算法高效更新 DOM。提供 memoization、React.lazy 等优化手段。 |
| 状态管理与数据流 | 强调使用可观察的数据流来管理状态，数据流是单向的，但可以通过特定 API 实现状态共享和更新。 | 提供 Vuex 作为中心化状态管理解决方案，数据流是双向的，支持数据绑定和事件监听。 | 本身不提供中心化状态管理解决方案，通常与 Redux 或 Context API 一起使用。数据流是单向的，从父组件流向子组件。 |
| 组件化与复用 | 支持组件化开发，组件可以独立开发、测试和复用。通过导入和导出机制复用组件。 | 支持组件化开发，组件可以包含模板、样式和逻辑。通过 Mixins、HOCs 和 Slots 等机制复用组件。 | 支持组件化开发，组件可以包含 JSX、样式和逻辑。通过 Hooks、HOCs 和 Render Props 等机制复用组件。 |
Qwik 代码案例
import{ html, component$, useStore }from'@builder.io/qwik';// 假设有一个状态管理库constuseCounterStore=()=>useStore({key:'counter',initial:0});exportdefaultcomponent$('CounterComponent',()=>{const counter =useCounterStore();return html` <div> <p>Count: ${counter.value}</p> <button onClick$={() => counter.value++}>Increment</button> </div> `;});
Vue 代码案例
<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; } } }; </script>
React 代码案例
import React, { useState } from 'react'; function CounterComponent() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default CounterComponent;
综上所述，Qwik、Vue 和 React 在核心不同点上各有优劣，选择哪个框架取决于项目的具体需求和开发者的偏好。
2024年，我收获颇丰，难以一一赘述。特此附上一些截图，记录我的成长足迹：小程序开发、Vue项目实战、React项目探索、服务端渲染技术实践、脚手架源码搭建经历、三维模型、前端面试经验总结，以及国网体系下原生框架封装成Vue版本的框架成果【因涉密无法开源】。
至此，2024年的篇章渐入尾声，回望这一年，真是非比寻常。满载着经历与成长，我们满怀希望地迈向新的一年。愿2025年更加辉煌灿烂，让我们携手并进，共同书写更加美好的未来，一起加油，共创辉煌！
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online