从零开始实现Vue3+WebAssembly万级数据表格开发流程

接上文，5.0版本WebAssembly（Wasm）不能直接操作 Canvas，但它可以作为 Canvas 表格的"核心引擎"，处理高性能的计算和数据管理，渲染依然需要通过 JavaScript 调用 Canvas API 实现。

┌────────────┐ 调度逻辑 ┌────────────┐ │ 主线程 │ ─────────────▶ │ WebAssembly │ │ JS Canvas │ ◀────指令数据────│ 核心逻辑 │ └────┬───────┘ └────────────┘ │ ▲ ▼ │ ┌────────────┐ 共享内存或 │ │◀──── draw() ─────┐ 结构化数据 └────────────┘

一、创建Vue项目

首先，使用Vite快速创建一个Vue3项目。在终端中运行以下命令：

lua 复制代码

npm create vite my-project --template vue-ts

创建一个名为my-project的Vue3项目，并使用TypeScript作为开发语言。

二、项目目录结构规划

在项目开发之前，先规划好项目目录结构，以便于后续的开发和维护。建议的目录结构如下：

bash 复制代码

project-root/
├── src/
│   └── components/
│       └── DataTable.vue  # 数据表格组件
├── wasm-processor/    # Rust项目目录，用于编写WASM代码
└── vite.config.ts     # Vite配置文件

三、配置WASM支持安装Rust工具链

为了编写和编译Rust代码，需要安装Rust工具链。在终端中运行以下命令：

bash 复制代码

curl --proto '=https' --tlsv. -sSf https://sh.rustup.rs | sh
source $HOME/.cargo/env

安装Rust工具链，并将其添加到系统环境变量中。下载慢的话可以走如下配置

配置环境变量

ini 复制代码

export RUSTUP_DIST_SERVER="https://rsproxy.cn"
export RUSTUP_UPDATE_ROOT="https://rsproxy.cn/rustup"

创建.cargo文件，在里面新增config.toml，复制一下源

ini 复制代码

[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"
replace-with = 'ustc'
[source.ustc]
registry = "git://mirrors.ustc.edu.cn/crates.io-index"

//或者阿里源，用阿里源的话下载wasm-pack时候需要去掉
[source.crates-io]
registry = "https://github.com/rust-lang/crates.io-index"
replace-with = "rustcc"

[source.rustcc]
registry = "https://code.aliyun.com/rustcc/crates.io-index"

添加WASM构建目标

接下来，需要为Rust项目添加WASM构建目标。运行以下命令来安装wasm-pack工具：

perl 复制代码

cargo install wasm-pack

wasm-pack是一个方便的工具，用于将Rust代码编译为WASM模块，并生成相应的JavaScript胶水代码。

安装Vite插件

为了在Vite项目中集成WASM支持，需要安装vite-plugin-wasm和vite-plugin-top-level-await插件。运行以下命令：

sql 复制代码

npm add vite-plugin-wasm@latest vite-plugin-top-level-await@latest

配置Vite

在vite.config.ts文件中，添加对Vue和WASM插件的配置：

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import wasm from 'vite-plugin-wasm'
import topLevelAwait from 'vite-plugin-top-level-await'

export default defineConfig({
  plugins: vue(), wasm(), topLevelAwait()]
})

这将使Vite能够处理WASM模块，并在构建过程中包含它们。

四、编写Rust代码并编译为WASM

首先在项目根目录创建wasm模块：

sql 复制代码

cargo new --lib wasm-processor
cd wasm-processor

在wasm-processor目录中，创建一个新的Rust库项目，并编写用于处理数据的Rust代码。在Cargo.toml文件中，配置库类型为cdylib，并添加必要的依赖项：

ini 复制代码

[package]
name = "wasm-processor"
version = ".."
edition = "1"

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
serde = { version = "1.0", features = ["derive"] }
serde_json = "."

编写完Rust代码后，使用wasm-pack将其编译为WASM模块：

bash 复制代码

cd wasm-processor
wasm-pack build --target web

编译完成后，将在pkg目录中生成WASM二进制文件、JavaScript胶水代码和类型定义文件。

五、开发与构建

现在，可以在Vue组件中导入并使用WASM模块了。在DataTable.vue组件中，使用import语句导入WASM模块，并调用其提供的功能来处理数据。

rust 复制代码

// lib.rs
use wasm_bindgen::prelude::*;
use serde::{Serialize, Deserialize};

#[derive(Serialize, Deserialize)]
pub struct ProcessedItem {
    pub id: u32,
    pub processed: String
}

#[wasm_bindgen]
pub fn process_data(input: &str) -> String {
    let count: u32 = input.parse().unwrap_or(0);
    let result: Vec<ProcessedItem> = (0..count).map(|i| ProcessedItem {
        id: i,
        processed: format!("WASM_{}", i)
    }).collect();
    
    serde_json::to_string(&result).unwrap()
}

csharp 复制代码

// DataTable.vue
...
import init, { process_data } from '../../wasm-processor/pkg/wasm_processor'

onMounted(async () => {
  await init()
  const jsonStr = process_data("100000") // 生成100000条测试数据
  data.value = JSON.parse(jsonStr)
})
...

六、常见问题解决

Vite版本不兼容‌：如果vite-plugin-wasm插件要求Vite的特定版本，而当前项目中的Vite版本不兼容，可以通过运行以下命令来升级Vite：

css 复制代码

npm install vite@latest

升级后，请确保重新运行项目以验证兼容性。

通过以上步骤，就可以从零开始实现一个Vue3+Rust+WebAssembly的亿万级数据表格项目了。

这里只写了webassembly处理大量数据的代码，后续可以在增加坐标计算、命中检测、表格diff、搜索排序过滤等

原文地址