第 8 章：集成到真实项目中

8.1 集成到 Vue/React

将 WebAssembly 集成进 Vue 或 React 项目可提升性能表现，步骤如下：

• 打包 WASM 模块：使用 wasm-pack（Rust）或 emcc（C/C++）生成 .wasm 文件和绑定 JS；
• 在框架中加载：
  • Vue：在 setup() 或生命周期钩子中动态 fetch 加载 WASM；
  • React：通过 useEffect() 和 useState() 控制加载与状态更新；
• 与组件交互：将 WASM 函数封装为 composables 或 hooks，供 UI 调用；
• 示例结构：

  const wasm = await import('./pkg/wasm_module');
  const result = wasm.computeSomething(input);

8.2 图像处理实战

WebAssembly 特别适用于图像处理场景，可显著优化浏览器端的处理效率：

• 典型流程：
  1. JavaScript 读取 <canvas> 像素数据；
  2. 传递数据给 WebAssembly 模块处理；
  3. 将处理结果写回画布；
• 使用 Rust 示例：
  • 利用 image crate 编写处理逻辑；
  • 使用 wasm-bindgen 暴露操作接口；
• 性能提升点：
  • 避免频繁 JS <-> WASM 调用；
  • 批量处理数据（如 Uint8Array）而非逐像素。

8.3 WebAssembly 组件封装

为了更好地在项目中复用 WASM 模块，可将其封装为标准组件或模块：

• 封装原则：
  • 封装成类或 composable/hook；
  • 抽象 WASM 的初始化和内存管理逻辑；
  • 对外仅暴露高层调用接口；
• 组件示例（Vue）：

  import { ref, onMounted } from 'vue';
  import init, { resizeImage } from '../wasm/image_tools';
  
  export function useImageResize() {
    const ready = ref(false);
  
    onMounted(async () => {
      await init();
      ready.value = true;
    });
  
    const resize = (data, width, height) => resizeImage(data, width, height);
    return { ready, resize };
  }

这样可以让 WASM 逻辑在前端项目中更加模块化、易用和可维护。