2024 年前端框架技术演进与实战心得总结

其他重要优化和功能支持

1. 增强的样式表和脚本管理 React 19 提供了对可控优先级的样式表的内置支持，确保异步脚本在组件树中按预定顺序执行。这降低了管理复杂样式和脚本冲突的难度，使得开发者能够更轻松地构建和维护样式和脚本。

2. React DevTools 的更新 React DevTools 在 2024 年进行了多次更新，其中最为重要的版本是 React DevTools 6.0.0（发布于 2024 年 9 月 27 日）。Server Components 的调试功能成为亮点。主要内容包括：

   • Server Components 支持：在组件树中，React DevTools 6.0.0 版本能够显示 Server Components，方便开发者调试服务器端渲染的组件。
   • 即时函数检查：提高了函数检查的速度，使得开发者能够更快速地查看组件函数的定义。
   • 元素检查响应迅速：改进了元素检查的性能，使操作更加流畅。
   • 环境名称过滤：增加了对环境名称的过滤功能，便于在复杂的应用中快速定位特定的环境。
   • 支持次要环境名称变更：当次要环境名称发生变化时，工具能够自动更新显示。
   • 函数点击跳转：允许开发者点击函数名称直接跳转到函数的定义位置。

3. TypeScript 支持的改进 React 19 对 TypeScript 的支持进行了改进，使得响应式对象和计算属性的类型推断更加智能。这为使用 TypeScript 的开发者提供了更好的开发体验，减少了类型错误的发生。

综上所述，2024 年 React 框架在性能、开发效率、异步操作管理和服务端渲染等方面进行了多项重要的优化和功能支持。这些更新不仅提升了 React 应用的性能和稳定性，还为开发者提供了更强大的工具和更便捷的开发体验。

二、Vue 框架

Vue 版本与维护方面

Vue 2 生命周期结束：2023 年底，Vue 2 停止开源维护，2024 年标志着 Vue 2 生命周期的正式完结，这促使开发者向 Vue 3 及更高版本过渡，需要及时迭代相关技能。

性能优化与增强

1. Vue 3.3

• 性能优化：虚拟 DOM 的处理和组件渲染方面进行了优化，提高了应用程序的响应速度。内部算法优化，减少了不必要的重渲染，提高了整体性能。
• Composition API 增强：Composition API 得到了进一步的增强，代码结构更加清晰和模块化。新增了更多的钩子函数，便于开发者更灵活地控制组件生命周期。
• TypeScript 支持加强：对 TypeScript 的支持进一步加强，类型推断更加准确。提供了更好的类型定义，减少了类型错误，提高了代码的可维护性。
• 内置指令：新增了内置指令如 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>
export default {
  data() {
    return {
      list: [
        { id: 1, selected: false },
        { id: 2, selected: false },
      ];
    };
  }
};
</script>

• Vue DevTools 更新：Vue DevTools 进行了更新，提供了更多的调试和分析功能。

2. Vue 3.4

• 模板解析器重写：模板解析器完全重写，速度提高了 2 倍，SFC（单文件组件）构建性能提升。
• 响应式系统重构：响应式系统进行了实质性的重构，提高了计算属性的重新计算效率。减少了不必要的组件重新渲染，保持完全的向后兼容性。
• defineModel 稳定：defineModel 是一个新的 <script setup> 宏，旨在简化支持 v-model。在 3.3 中作为实验性功能发布，并在 3.4 中升级为稳定状态。为 v-model 修饰符的使用提供了更好的支持。
• v-bind 同名速记：允许更简洁的 v-bind 语法，例如：<img :id="id" :src="src" :alt="alt"> 可以简写为 <img :[id]="id" :[src]="src" :[alt]="alt">。
• 错误消息改进：对水合（Hydration）不匹配错误消息进行了多项改进，包括改进的措辞和更详细的错误信息。
• 生产错误参考页面：添加了生产错误参考页面，便于开发者在生产环境中调试和解决问题。

3. Vue 3.5

• 响应式属性解构的稳定性：允许开发者在使用 defineProps 宏时进行属性解构，而不会损失响应性。减少了编码过程中的复杂性，提升了开发效率。
• useTemplateRef 功能：简化了模板引用的声明过程，使模板引用更为清晰。便于开发者更灵活地管理 DOM 元素。
• useId 函数：引入了新的 useId 函数，为服务端渲染和客户端渲染生成唯一且稳定的 ID。减少了数据不匹配的问题，对表单及可访问性设计大有裨益。
• 性能优化：内存使用量减少近 60%，处理大型响应式数组时表现得更加高效。数组迭代速度提高，性能再创新高。
• 内置组件增强：引入了更多内置组件，如高级表单组件、布局容器等，帮助开发者更高效地构建应用。
• 类型安全增强：增强了类型推导和类型提示，便于开发者在编写复杂项目时更容易发现潜在的类型错误。

三、技术探索 —— Svelte 框架

提到前端开发框架，大家第一时间想到的就是 Vue、React 和 Angular 三大主流。毕竟它们各个都是 GitHub 上 10w+ star 的知名项目，每个前端工程师至少要学习其中一个框架。但是，最近几年，一个新的前端框架逐渐出现在人们眼前，它就是后起之秀『Svelte』。目前已经 8w+ 个 star，虽然暂时无法撼动三大主流框架的霸主地位，但是其恐怖的 star 增速，值得我们关注和思考。

Vue 作者对其评价

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 等集成良好，能够方便地进行项目的打包和构建。

四、框架探索—— Qwik

2023 年 5 月 2 号 Builder 官方 Qwik 研发团队对外宣布追求极致性能的前端框架 Qwik 1.0 正式发布。

Qwik 介绍

• 项目官网：https://qwik.builder.io/
• 项目 Github：https://github.com/BuilderIO/qwik
• Qwik 是一个超快的 JavaScript 框架。
• Qwik 使用一种细粒度的模型来隔离应用程序的分段，这些分段根据需要进行水合。通过从基本原则出发，Qwik 可以实现其他无法实现的性能，并代表了前端 JavaScript 的另一种发展路径。
• Qwik 是'零基线 JavaScript'框架趋势的一部分。网站和应用程序经常被繁重的 JavaScript 资产所臃肿，影响了浏览器的性能：即使页面在服务端渲染，用户也必须等待 JavaScript 被加载、解析和执行，才能与页面互动。
• Qwik 没有依靠 hydration 为服务端生成的页面增加互动性，而是使用一种叫做 resumability 的技术来提供即时互动的 HTML。它的原理在 HTML 中序列化应用程序的状态。
• 该项目由 Miško Hevery 领导，他是 AngularJS 的创建者，AngularJS 的口号是'为 Web 应用增强 HTML'，而 Qwik 是'HTML 优先框架'…不知为何，它们在良好的古老 HTML 之上构建应用的意图是一样的。

框架比较

核心不同点比较

代码案例

Qwik 代码案例

import { html, component$, useStore } from '@builder.io/qwik';
// 假设有一个状态管理库
const useCounterStore = () => useStore({ key: 'counter', initial: 0 });
export default component$('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;

详细分析

1. 渲染机制与性能优化

   • Qwik：采用 Resumable Streams 技术，支持服务器端预渲染和客户端按需加载，能够显著提高页面的首次加载速度。通过减少初始 JavaScript 的下载和执行量，只加载和渲染用户当前需要的内容。
   • Vue 和 React：使用虚拟 DOM，通过差异算法高效更新 DOM，减少了不必要的 DOM 操作。在状态发生变化时，重新渲染虚拟 DOM，并比较新旧虚拟 DOM 的差异，只更新发生变化的真实 DOM 部分。

2. 状态管理与数据流

   • Qwik：强调使用可观察的数据流来管理状态，使得状态的变化能够自动触发组件的重新渲染。通过状态管理库（假设存在）来管理状态，数据流是单向的，但可以通过特定 API 实现状态共享和更新。
   • Vue：提供 Vuex 作为中心化状态管理解决方案，使得状态的管理和共享变得更加容易和可控。通过 Vuex 的 store 来管理全局状态，数据流是双向的，支持数据绑定和事件监听。
   • React：与 Redux 或 Context API 等一起使用，能够灵活地管理状态。数据流是单向的，从父组件流向子组件。通常通过 Redux 或 Context API 来实现全局状态管理。

3. 组件化与复用

   • Qwik：支持组件化开发，组件可以独立开发、测试和复用。通过导入和导出机制复用组件，组件之间可以通过数据流进行通信。
   • Vue：提供丰富的组件复用机制，如 Mixins、HOCs 和 Slots 等。通过 Mixins 共享代码逻辑，通过 HOCs 增强组件功能，通过 Slots 实现组件插槽和组合。
   • React：支持组件化开发，组件可以独立开发、测试和复用。通过 Hooks、HOCs 和 Render Props 等机制复用组件，组件之间可以通过 Props 和 Context 进行通信。

综上所述，Qwik、Vue 和 React 在核心不同点上各有优劣，选择哪个框架取决于项目的具体需求和开发者的偏好。

五、简述

2024 年，收获颇丰，难以一一赘述。特此附上一些截图，记录我的成长足迹：小程序开发、Vue 项目实战、React 项目探索、服务端渲染技术实践、脚手架源码搭建经历、三维模型、前端面试经验总结，以及部分内部项目因保密限制未开源。

六、结语

至此，2024 年的篇章渐入尾声。回望这一年，收获满满。满载着经历与成长，我们满怀希望地迈向新的一年。愿 2025 年更加辉煌灿烂，让我们携手并进，共同书写更加美好的未来。