2024 年前端主流框架技术总结与探索

(四) 其他重要优化和功能支持

1. 增强的样式表和脚本管理
   • React 19 提供了对可控优先级的样式表的内置支持，确保异步脚本按预定顺序执行。
2. React DevTools 的更新
   • React DevTools 6.0.0 版本增强了 Server Components 的调试功能，包括即时函数检查、元素检查响应迅速及环境名称过滤等。
3. TypeScript 支持的改进
   • React 19 对 TypeScript 的支持进行了改进，使得响应式对象和计算属性的类型推断更加智能。

二、Vue 框架

(一) Vue 版本与维护方面

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

(二) 性能优化与增强

1. Vue 3.3

• 性能优化：虚拟 DOM 处理和组件渲染优化，内部算法减少不必要的重渲染。
• Composition API 增强：代码结构更清晰，新增更多钩子函数。
• TypeScript 支持加强：类型推断更准确，提供更好的类型定义。
• 内置指令：新增 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>
  

2. Vue 3.4

• 模板解析器重写：速度提高 2 倍，SFC 构建性能提升。
• 响应式系统重构：提高计算属性重新计算效率，减少不必要的组件重新渲染。
• defineModel 稳定：简化支持 v-model，为修饰符使用提供更好支持。
• v-bind 同名速记：允许更简洁的 v-bind 语法。
• 错误消息改进：对水合不匹配错误消息进行多项改进。

3. Vue 3.5

• 响应式属性解构的稳定性：允许在使用 defineProps 宏时进行属性解构而不损失响应性。
• useTemplateRef 功能：简化模板引用的声明过程。
• useId 函数：为服务端渲染和客户端渲染生成唯一且稳定的 ID。
• 性能优化：内存使用量减少近 60%，数组迭代速度提高。

三、技术探索 —— Svelte 框架

(一) 迅速崛起

Svelte 作为后起之秀，Star 增速惊人。其核心思想在于'通过静态编译减少框架运行时的代码量'。

(二) Vue 作者对其评价

尤雨溪指出，传统框架需引入运行时，而 Svelte 编译后所有需要的运行时代码都包含在组件内，无需额外引入框架运行时。Svelte 最适合分发 Web Components 的场景。

(三) 特点案例

Svelte 在构建阶段进行大量优化，将模板编译为高效的原生 JavaScript 代码，避免运行时虚拟 DOM 开销。

<script>
  let name = 'World';
</script>
<h1>Hello {name}!</h1>
<style>
  h1 { color: blue; }
</style>

(四) 性能优势

• 加载速度快：编译时转换模板，减少浏览器加载和解析框架代码的时间。
• 运行时性能高：无虚拟 DOM 开销，直接更新真实 DOM。

(五) 生态系统与工具支持

• 生态：拥有 Svelte Material UI 等组件库，以及 SvelteKit 全栈框架。
• 开发工具：VS Code 插件支持良好，与 Rollup、Webpack 集成良好。

四、框架探索—— Qwik

2023 年 5 月 2 日，Builder 官方 Qwik 研发团队宣布 Qwik 1.0 正式发布。

(一) Qwik 介绍

Qwik 是一个超快的 JavaScript 框架，采用细粒度模型隔离应用程序分段，根据需要进行水合。它使用 Resumability 技术提供即时互动的 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。
2. 状态管理与数据流
   • Qwik：强调可观察数据流。
   • Vue：提供 Vuex 作为中心化状态管理。
   • React：与 Redux 或 Context API 配合使用。
3. 组件化与复用
   • 三者均支持组件化开发，各有不同的复用机制。

五、简述

2024 年收获颇丰，涵盖小程序开发、Vue/React 项目实战、服务端渲染技术实践、脚手架源码搭建经历、三维模型、前端面试经验总结，以及企业级项目下原生框架封装成 Vue 版本的成果（部分代码因保密原因未公开）。

六、结语

2024 年的篇章渐入尾声，满载经历与成长。愿 2025 年更加辉煌灿烂，让我们携手并进，共同书写更加美好的未来。