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

URL: https://caijiao.org/webassembly/advanced/08-integration
Source: docs/webassembly/advanced/08-integration.md
Description: 本章介绍如何将 WebAssembly 集成进现代前端框架项目中，并通过实战示例探索其实际应用。

## 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 调用；
- **示例结构**：
  ```js
  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）**：
  ```ts
  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 逻辑在前端项目中更加模块化、易用和可维护。