❌

阅读视图

发现新文章，点击刷新页面。

WebAssembly实战指南：将高性能计算带入浏览器

✇掘金 前端
bluceli

引言

WebAssembly（简称Wasm）是一种新型的代码格式，可以在现代Web浏览器中运行。它为Web平台带来了接近原生的性能，使得C++、Rust等语言编写的代码能够在浏览器中高效运行。本文将深入探讨WebAssembly的8大核心特性，帮助你掌握这个将高性能计算带入浏览器的强大技术。

WebAssembly基础概念

1. 什么是WebAssembly

WebAssembly是一种二进制指令格式，专为高效的执行和紧凑的表示而设计。它不是要替代JavaScript，而是与JavaScript协同工作，让Web应用能够利用多种语言编写的高性能代码库。

// WebAssembly的主要特点
// 1. 二进制格式：体积小，加载快
// 2. 接近原生性能：执行速度快
// 3. 多语言支持：C/C++、Rust、Go等
// 4. 安全性：在沙箱环境中运行
// 5. 可移植性：跨平台兼容

2. WebAssembly与JavaScript的关系

// JavaScript和WebAssembly的互补关系
// JavaScript：适合UI交互、DOM操作、业务逻辑
// WebAssembly：适合计算密集型任务、图像处理、加密解密

// 典型的使用场景
const scenarios = {
  imageProcessing: '图像滤镜、视频编解码',
  gameDevelopment: '3D游戏引擎、物理模拟',
  dataProcessing: '大数据分析、机器学习推理',
  cryptography: '加密解密、哈希计算',
  scientificComputing: '数学计算、物理模拟'
};

编译和加载WebAssembly

3. 从C++编译到WebAssembly

使用Emscripten工具链将C++代码编译为WebAssembly。

// simple.cpp - C++源代码
#include <emscripten.h>

extern "C" {
  // 导出函数给JavaScript调用
  EMSCRIPTEN_KEEPALIVE
  int add(int a, int b) {
    return a + b;
  }
  
  EMSCRIPTEN_KEEPALIVE
  int fibonacci(int n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
}

# 编译命令
emcc simple.cpp -o simple.js \
  -s EXPORTED_FUNCTIONS='["_add","_fibonacci"]' \
  -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]' \
  optimiz

4. 在JavaScript中加载WebAssembly

// 方法1：使用Emscripten生成的胶水代码
const Module = require('./simple.js');

Module.onRuntimeInitialized = function() {
  // 调用C++函数
  const result = Module._add(10, 20);
  console.log('10 + 20 =', result);
  
  const fib = Module._fibonacci(10);
  console.log('fibonacci(10) =', fib);
};

// 方法2：直接加载.wasm文件
async function loadWebAssembly(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  const module = await WebAssembly.instantiate(buffer);
  return module.instance.exports;
}

// 使用示例
loadWebAssembly('simple.wasm').then(exports => {
  console.log(exports.add(10, 20));
  console.log(exports.fibonacci(10));
});

JavaScript与WebAssembly交互

5. 数据类型转换

WebAssembly和JavaScript之间的数据类型需要正确转换。

// WebAssembly只支持有限的数值类型
// i32: 32位整数
// i64: 64位整数
// f32: 32位浮点数
// f64: 64位浮点数

// JavaScript与WebAssembly的交互
class WasmModule {
  constructor(module) {
    this.exports = module.exports;
    this.memory = module.exports.memory || new WebAssembly.Memory({ initial: 256 });
  }
  
  // 传递字符串到WebAssembly
  writeString(str) {
    const encoder = new TextEncoder();
    const bytes = encoder.encode(str);
    
    // 分配内存
    const offset = this.exports.malloc(bytes.length + 1);
    
    // 写入内存
    const view = new Uint8Array(this.memory.buffer);
    view.set(bytes, offset);
    view[offset + bytes.length] = 0; // null终止符
    
    return offset;
  }
  
  // 从WebAssembly读取字符串
  readString(offset) {
    const view = new Uint8Array(this.memory.buffer);
    let length = 0;
    
    // 计算字符串长度
    while (view[offset + length] !== 0) {
      length++;
    }
    
    // 读取字符串
    const bytes = view.slice(offset, offset + length);
    const decoder = new TextDecoder();
    return decoder.decode(bytes);
  }
}

// 使用示例
const wasm = new WasmModule(module);
const strOffset = wasm.writeString('Hello WebAssembly');
const result = wasm.exports.processString(strOffset);
const output = wasm.readString(result);

6. 处理复杂数据结构

// 处理数组和对象
class ArrayHandler {
  constructor(module) {
    this.exports = module.exports;
    this.memory = module.exports.memory;
  }
  
  // 创建数组
  createArray(type, values) {
    const bytesPerElement = this.getBytesPerElement(type);
    const array = new (this.getTypedArray(type))(
      this.memory.buffer,
      this.exports.malloc(values.length * bytesPerElement),
      values.length
    );
    
    array.set(values);
    return array.byteOffset;
  }
  
  // 读取数组
  readArray(type, offset, length) {
    const TypedArray = this.getTypedArray(type);
    return new TypedArray(
      this.memory.buffer,
      offset,
      length
    );
  }
  
  getBytesPerElement(type) {
    const sizes = {
      'i32': 4,
      'f32': 4,
      'f64': 8
    };
    return sizes[type] || 4;
  }
  
  getTypedArray(type) {
    const types = {
      'i32': Int32Array,
      'f32': Float32Array,
      'f64': Float64Array
    };
    return types[type] || Int32Array;
  }
}

// 使用示例
const handler = new ArrayHandler(module);
const arrayOffset = handler.createArray('f32', [1.0, 2.0, 3.0, 4.0]);
const result = handler.exports.processArray(arrayOffset, 4);
const output = handler.readArray('f32', result, 4);

实战应用案例

7. 图像处理应用

使用WebAssembly实现高性能的图像滤镜。

// image_filter.cpp
#include <emscripten.h>
#include <stdint.h>

extern "C" {
  EMSCRIPTEN_KEEPALIVE
  void grayscale(uint8_t* data, int width, int height) {
    for (int i = 0; i < width * height * 4; i += 4) {
      uint8_t r = data[i];
      uint8_t g = data[i + 1];
      uint8_t b = data[i + 2];
      
      // 计算灰度值
      uint8_t gray = 0.299 * r + 0.587 * g + 0.114 * b;
      
      data[i] = gray;
      data[i + 1] = gray;
      data[i + 2] = gray;
    }
  }
  
  EMSCRIPTEN_KEEPALIVE
  void invert(uint8_t* data, int width, int height) {
    for (int i = 0; i < width * height * 4; i += 4) {
      data[i] = 255 - data[i];         // R
      data[i + 1] = 255 - data[i + 1]; // G
      data[i + 2] = 255 - data[i + 2]; // B
    }
  }
}

// JavaScript调用
class ImageProcessor {
  constructor() {
    this.wasm = null;
  }
  
  async init() {
    const response = await fetch('image_filter.wasm');
    const buffer = await response.arrayBuffer();
    const module = await WebAssembly.instantiate(buffer);
    this.wasm = module.instance.exports;
  }
  
  applyGrayscale(imageData) {
    const { data, width, height } = imageData;
    
    // 创建WebAssembly内存视图
    const wasmMemory = new Uint8Array(
      this.wasm.memory.buffer,
      this.wasm.malloc(data.length),
      data.length
    );
    
    // 复制图像数据
    wasmMemory.set(data);
    
    // 调用WebAssembly函数
    this.wasm.grayscale(wasmMemory.byteOffset, width, height);
    
    // 获取处理后的数据
    const result = new Uint8ClampedArray(wasmMemory);
    
    // 释放内存
    this.wasm.free(wasmMemory.byteOffset);
    
    return new ImageData(result, width, height);
  }
}

// 使用示例
const processor = new ImageProcessor();
await processor.init();

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

const processedData = processor.applyGrayscale(imageData);
ctx.putImageData(processedData, 0, 0);

8. 加密解密应用

// crypto.cpp
#include <emscripten.h>
#include <stdint.h>
#include <string.h>

extern "C" {
  EMSCRIPTEN_KEEPALIVE
  void xorEncrypt(uint8_t* data, int length, uint8_t key) {
    for (int i = 0; i < length; i++) {
      data[i] ^= key;
    }
  }
  
  EMSCRIPTEN_KEEPALIVE
  void simpleHash(uint8_t* data, int length, uint8_t* output) {
    uint32_t hash = 0;
    
    for (int i = 0; i < length; i++) {
      hash = hash * 31 + data[i];
    }
    
    memcpy(output, &hash, 4);
  }
}

// JavaScript加密工具
class CryptoTool {
  constructor() {
    this.wasm = null;
  }
  
  async init() {
    const response = await fetch('crypto.wasm');
    const buffer = await response.arrayBuffer();
    const module = await WebAssembly.instantiate(buffer);
    this.wasm = module.instance.exports;
  }
  
  encrypt(data, key) {
    const encoder = new TextEncoder();
    const bytes = encoder.encode(data);
    
    // 分配内存
    const wasmData = new Uint8Array(
      this.wasm.memory.buffer,
      this.wasm.malloc(bytes.length),
      bytes.length
    );
    
    wasmData.set(bytes);
    
    // 加密
    this.wasm.xorEncrypt(wasmData.byteOffset, bytes.length, key);
    
    // 获取结果
    const encrypted = new Uint8Array(wasmData);
    
    // 释放内存
    this.wasm.free(wasmData.byteOffset);
    
    return btoa(String.fromCharCode(...encrypted));
  }
  
  decrypt(encryptedData, key) {
    const bytes = new Uint8Array(
      atob(encryptedData).split('').map(c => c.charCodeAt(0))
    );
    
    const wasmData = new Uint8Array(
      this.wasm.memory.buffer,
      this.wasm.malloc(bytes.length),
      bytes.length
    );
    
    wasmData.set(bytes);
    
    // 解密（XOR加密解密相同）
    this.wasm.xorEncrypt(wasmData.byteOffset, bytes.length, key);
    
    const decrypted = new Uint8Array(wasmData);
    this.wasm.free(wasmData.byteOffset);
    
    const decoder = new TextDecoder();
    return decoder.decode(decrypted);
  }
}

// 使用示例
const crypto = new CryptoTool();
await crypto.init();

const message = 'Hello WebAssembly!';
const key = 42;

const encrypted = crypto.encrypt(message, key);
console.log('加密:', encrypted);

const decrypted = crypto.decrypt(encrypted, key);
console.log('解密:', decrypted);

性能优化技巧

9. 内存管理优化

// 内存池管理
class MemoryPool {
  constructor(module, initialSize = 1024 * 1024) {
    this.module = module;
    this.pool = [];
    this.allocated = new Set();
    this.chunkSize = initialSize;
  }
  
  allocate(size) {
    // 查找合适的内存块
    for (let i = 0; i < this.pool.length; i++) {
      const block = this.pool[i];
      if (!block.used && block.size >= size) {
        block.used = true;
        this.allocated.add(block.offset);
        return block.offset;
      }
    }
    
    // 分配新内存块
    const offset = this.module.exports.malloc(size);
    this.pool.push({
      offset,
      size,
      used: true
    });
    this.allocated.add(offset);
    
    return offset;
  }
  
  free(offset) {
    const block = this.pool.find(b => b.offset === offset);
    if (block) {
      block.used = false;
      this.allocated.delete(offset);
    }
  }
  
  cleanup() {
    // 释放所有未使用的内存块
    this.pool.forEach(block => {
      if (!block.used) {
        this.module.exports.free(block.offset);
      }
    });
    
    this.pool = this.pool.filter(block => block.used);
  }
}

10. 多线程处理

// 使用Web Worker和WebAssembly
class WasmWorker {
  constructor(wasmUrl) {
    this.worker = new Worker(URL.createObjectURL(
      new Blob([`
        let wasmModule = null;
        
        self.onmessage = async function(e) {
          const { type, data } = e.data;
          
          if (type === 'init') {
            const response = await fetch(data.wasmUrl);
            const buffer = await response.arrayBuffer();
            wasmModule = await WebAssembly.instantiate(buffer);
            self.postMessage({ type: 'ready' });
          } else if (type === 'compute') {
            const result = wasmModule.instance.exports[data.function](
              ...data.args
            );
            self.postMessage({ type: 'result', data: result });
          }
        };
      `], { type: 'application/javascript' })
    ));
  }
  
  async init() {
    return new Promise((resolve) => {
      this.worker.onmessage = (e) => {
        if (e.data.type === 'ready') {
          resolve();
        }
      };
      
      this.worker.postMessage({
        type: 'init',
        data: { wasmUrl: this.wasmUrl }
      });
    });
  }
  
  compute(functionName, ...args) {
    return new Promise((resolve) => {
      this.worker.onmessage = (e) => {
        if (e.data.type === 'result') {
          resolve(e.data.data);
        }
      };
      
      this.worker.postMessage({
        type: 'compute',
        data: { function: functionName, args }
      });
    });
  }
}

// 使用示例
const worker = new WasmWorker('compute.wasm');
await worker.init();

// 并行计算
const results = await Promise.all([
  worker.compute('heavyComputation', 1000),
  worker.compute('heavyComputation', 2000),
  worker.compute('heavyComputation', 3000)
]);

调试和测试

11. WebAssembly调试技巧

// 调试工具
class WasmDebugger {
  constructor(module) {
    this.exports = module.exports;
    this.memory = module.exports.memory;
    this.breakpoints = new Set();
  }
  
  // 内存检查
  inspectMemory(offset, length) {
    const view = new Uint8Array(this.memory.buffer);
    const bytes = [];
    
    for (let i = 0; i < length; i++) {
      bytes.push(view[offset + i].toString(16).padStart(2, '0'));
    }
    
    return bytes.join(' ');
  }
  
  // 性能监控
  profileFunction(funcName, ...args) {
    const startTime = performance.now();
    const result = this.exports[funcName](...args);
    const endTime = performance.now();
    
    console.log(`${funcName} 执行时间: ${(endTime - startTime).toFixed(2)}ms`);
    return result;
  }
  
  // 内存使用统计
  getMemoryUsage() {
    const memory = this.exports.memory;
    return {
      used: memory.buffer.byteLength,
      total: memory.buffer.byteLength,
      pages: memory.buffer.byteLength / 65536
    };
  }
}

// 使用示例
const debugger = new WasmDebugger(module);

console.log('内存内容:', debugger.inspectMemory(0, 16));
console.log('内存使用:', debugger.getMemoryUsage());

const result = debugger.profileFunction('fibonacci', 30);

12. 单元测试

// WebAssembly测试框架
class WasmTester {
  constructor(module) {
    this.exports = module.exports;
    this.tests = [];
  }
  
  test(name, fn) {
    this.tests.push({ name, fn });
  }
  
  async run() {
    const results = [];
    
    for (const test of this.tests) {
      try {
        await test.fn(this.exports);
        results.push({ name: test.name, passed: true });
        console.log(`✓ ${test.name}`);
      } catch (error) {
        results.push({ name: test.name, passed: false, error: error.message });
        console.log(`✗ ${test.name}: ${error.message}`);
      }
    }
    
    return results;
  }
}

// 使用示例
const tester = new WasmTester(module);

tester.test('add函数测试', (exports) => {
  const result = exports.add(10, 20);
  if (result !== 30) {
    throw new Error(`期望30，实际得到${result}`);
  }
});

tester.test('fibonacci函数测试', (exports) => {
  const result = exports.fibonacci(10);
  if (result !== 55) {
    throw new Error(`期望55，实际得到${result}`);
  }
});

const results = await tester.run();
const passed = results.filter(r => r.passed).length;
console.log(`测试通过: ${passed}/${results.length}`);

总结

WebAssembly为Web平台带来了革命性的性能提升：

核心优势

  1. 高性能：接近原生的执行速度
  2. 多语言支持：C/C++、Rust、Go等
  3. 安全性：在沙箱环境中运行
  4. 可移植性：跨平台兼容
  5. 与JavaScript协同：完美互补

适用场景

  • 计算密集型任务：图像处理、视频编解码
  • 游戏开发：3D引擎、物理模拟
  • 数据处理：大数据分析、机器学习
  • 加密解密：密码学运算
  • 科学计算：数学计算、物理模拟

最佳实践

  1. 合理选择：使用WebAssembly处理性能关键代码
  2. 内存管理：注意内存分配和释放
  3. 数据转换：正确处理JavaScript和WebAssembly之间的数据类型
  4. 性能监控：持续监控和优化性能
  5. 错误处理：完善的错误处理和调试机制

学习路径

  1. 理解WebAssembly的基本概念
  2. 学习编译工具链（Emscripten）
  3. 掌握JavaScript与WebAssembly的交互
  4. 实践实际应用案例
  5. 学习性能优化技巧

WebAssembly正在改变Web开发的格局，让浏览器能够运行更复杂、更强大的应用。开始在你的项目中探索WebAssembly吧，体验高性能Web开发的全新可能！

本文首发于掘金，欢迎关注我的专栏获取更多前端技术干货！

Vue 3 Composition API深度解析：构建可复用逻辑的终极方案

✇掘金 前端
bluceli

引言

Vue 3的Composition API是Vue框架最重大的更新之一，它提供了一种全新的组件逻辑组织方式。与传统的Options API相比，Composition API让我们能够更灵活地组织和复用代码逻辑。本文将深入探讨Vue 3 Composition API的8大核心特性，帮助你掌握这个构建可复用逻辑的终极方案。

setup函数基础

1. setup函数的基本使用

setup函数是Composition API的入口点，它在组件创建之前执行。

import { ref, reactive } from 'vue';

export default {
  setup() {
    // 定义响应式数据
    const count = ref(0);
    const user = reactive({
      name: 'Vue 3',
      version: '3.0'
    });

    // 定义方法
    const increment = () => {
      count.value++;
    };

    // 返回给模板使用
    return {
      count,
      user,
      increment
    };
  }
};

2. setup函数的参数

setup函数接收两个参数：props和context。

export default {
  props: {
    title: String,
    initialCount: {
      type: Number,
      default: 0
    }
  },
  setup(props, context) {
    // props是响应式的，不能解构
    console.log(props.title);
    
    // context包含attrs、slots、emit等
    const { attrs, slots, emit } = context;
    
    // 触发事件
    const handleClick = () => {
      emit('update', props.initialCount + 1);
    };
    
    return { handleClick };
  }
};

响应式API详解

3. ref与reactive的选择

ref和reactive是创建响应式数据的两种方式，各有适用场景。

import { ref, reactive, toRefs } from 'vue';

// ref - 适合基本类型和单一对象
const count = ref(0);
const message = ref('Hello');

// 访问ref的值需要.value
console.log(count.value);
count.value++;

// reactive - 适合复杂对象
const state = reactive({
  count: 0,
  user: {
    name: 'Vue',
    age: 3
  }
});

// 访问reactive的值不需要.value
console.log(state.count);
state.count++;

// 在模板中自动解包，不需要.value
// <template>
//   <div>{{ count }}</div>
//   <div>{{ state.count }}</div>
// </template>

4. toRefs的使用

当需要从reactive对象中解构属性时，使用toRefs保持响应性。

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: 'Vue 3',
      isActive: true
    });

    // 不推荐 - 失去响应性
    // const { count, name } = state;

    // 推荐 - 使用toRefs保持响应性
    const { count, name, isActive } = toRefs(state);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      name,
      isActive,
      increment
    };
  }
};

计算属性与侦听器

5. computed计算属性

computed用于创建计算属性，支持getter和setter。

import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('John');
    const lastName = ref('Doe');

    // 只读计算属性
    const fullName = computed(() => {
      return firstName.value + ' ' + lastName.value;
    });

    // 可写计算属性
    const writableFullName = computed({
      get() {
        return firstName.value + ' ' + lastName.value;
      },
      set(value) {
        const [first, last] = value.split(' ');
        firstName.value = first;
        lastName.value = last;
      }
    });

    return {
      firstName,
      lastName,
      fullName,
      writableFullName
    };
  }
};

6. watch与watchEffect

watch和watchEffect用于侦听数据变化。

import { ref, reactive, watch, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const user = reactive({
      name: 'Vue',
      age: 3
    });

    // watchEffect - 自动追踪依赖
    watchEffect(() => {
      console.log(`Count is: ${count.value}`);
      console.log(`User is: ${user.name}`);
    });

    // watch - 显式指定侦听源
    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    // 侦听多个源
    watch([count, () => user.name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`Count: ${oldCount} -> ${newCount}, Name: ${oldName} -> ${newName}`);
    });

    // watch的配置选项
    watch(
      () => user.name,
      (newValue) => {
        console.log(`Name changed to: ${newValue}`);
      },
      {
        immediate: true,  // 立即执行
        deep: true        // 深度侦听
      }
    );

    return { count, user };
  }
};

生命周期钩子

7. 生命周期钩子的使用

Composition API中的生命周期钩子以on开头。

import { 
  onMounted, 
  onUpdated, 
  onUnmounted,
  onBeforeMount,
  onBeforeUpdate,
  onBeforeUnmount
} from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('组件挂载前');
    });

    onMounted(() => {
      console.log('组件已挂载');
      // 可以在这里访问DOM
    });

    onBeforeUpdate(() => {
      console.log('组件更新前');
    });

    onUpdated(() => {
      console.log('组件已更新');
    });

    onBeforeUnmount(() => {
      console.log('组件卸载前');
    });

    onUnmounted(() => {
      console.log('组件已卸载');
      // 清理工作
    });

    return {};
  }
};

自定义组合函数

8. 创建可复用的逻辑

自定义组合函数是Composition API的核心优势，让我们能够提取和复用逻辑。

// useCounter.js - 计数器逻辑
import { ref, computed } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  const reset = () => {
    count.value = initialValue;
  };

  const double = computed(() => count.value * 2);

  return {
    count,
    increment,
    decrement,
    reset,
    double
  };
}

// useMouse.js - 鼠标位置追踪
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  const update = (event) => {
    x.value = event.pageX;
    y.value = event.pageY;
  };

  onMounted(() => {
    window.addEventListener('mousemove', update);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', update);
  });

  return { x, y };
}

// 在组件中使用
import { useCounter, useMouse } from './composables';

export default {
  setup() {
    const { count, increment, decrement, double } = useCounter(10);
    const { x, y } = useMouse();

    return {
      count,
      increment,
      decrement,
      double,
      x,
      y
    };
  }
};

依赖注入

9. provide与inject

provide和inject用于跨组件层级传递数据。

// 父组件
import { provide, ref } from 'vue';

export default {
  setup() {
    const theme = ref('dark');
    const user = ref({
      name: 'Vue User',
      role: 'admin'
    });

    // 提供数据
    provide('theme', theme);
);
    provide('user', user);

    return { theme };
  }
};

// 子组件
import { inject } from 'vue';

export default {
  setup() {
    // 注入数据
    const theme = inject('theme');
    const user = inject('user');

    // 提供默认值
    const config = inject('config', {
      debug: false,
      version: '1.0'
    });

    return { theme, user, config };
  }
};

模板引用

10. 使用ref获取DOM元素

在Composition API中使用ref获取模板引用。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 创建模板引用
    const inputRef = ref(null);
    const listRef = ref(null);

    onMounted(() => {
      // 访问DOM元素
      inputRef.value.focus();
      
      // 访问组件实例
      console.log(listRef.value.items);
    });

    const focusInput = () => {
      inputRef.value.focus();
    };

    return {
      inputRef,
      listRef,
      focusInput
    };
  }
};

// 模板中使用
// <template>
//   <input ref="inputRef" />
//   <MyList ref="listRef" />
// </template>

实战案例

11. 表单处理组合函数

// useForm.js
import { ref, reactive } from 'vue';

export function useForm(initialValues, validationRules) {
  const values = reactive({ ...initialValues });
  const errors = reactive({});
  const touched = reactive({});

  const validate = () => {
    let isValid = true;
    
    for (const field in validationRules) {
      const rules = validationRules[field];
      const value = values[field];
      
      for (const rule of rules) {
        if (rule.required && !value) {
          errors[field] = rule.message || '此字段必填';
          isValid = false;
          break;
        }
        
        if (rule.pattern && !rule.pattern.test(value)) {
          errors[field] = rule.message || '格式不正确';
          isValid = false;
          break;
        }
        
        if (rule.validator && !rule.validator(value)) {
          errors[field] = rule.message || '验证失败';
          isValid = false;
          break;
        }
      }
    }
    
    return isValid;
  };

  const handleChange = (field) => (event) => {
    values[field] = event.target.value;
    touched[field] = true;
    
    if (errors[field]) {
      validate();
    }
  };

  const handleBlur = (field) => () => {
    touched[field] = true;
    validate();
  };

  const reset = () => {
    Object.assign(values, initialValues);
    Object.keys(errors).forEach(key => {
      errors[key] = '';
    });
    Object.keys(touched).forEach(key => {
      touched[key] = false;
    });
  };

  const submit = (callback) => () => {
    if (validate()) {
      callback(values);
    }
  };

  return {
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    validate,
    reset,
    submit
  };
}

// 使用示例
export default {
  setup() {
    const { values, errors, handleChange, handleBlur, submit } = useForm(
      {
        username: '',
        email: '',
        password: ''
      },
      {
        username: [
          { required: true, message: '用户名必填' },
          { pattern: /^[a-zA-Z0-9_]{3,20}$/, message: '用户名格式不正确' }
        ],
        email: [
          { required: true, message: '邮箱必填' },
          { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: '邮箱格式不正确' }
        ],
        password: [
          { required: true, message: '密码必填' },
          { validator: (value) => value.length >= 6, message: '密码至少6位' }
        ]
      }
    );

    const handleSubmit = submit((formData) => {
      console.log('表单提交:', formData);
      // 发送API请求
    });

    return {
      values,
      errors,
      handleChange,
      handleBlur,
      handleSubmit
    };
  }
};

12. 异步数据获取组合函数

// useAsyncData.js
import { ref, onMounted } from 'vue';

export function useAsyncData(fetchFn, options = {}) {
  const {
    immediate = true,
    initialData = null,
    onSuccess,
    onError
  } = options;

  const data = ref(initialData);
  const loading = ref(false);
  const error = ref(null);

  const execute = async (...args) => {
    loading.value = true;
    error.value = null;

    try {
      const result = await fetchFn(...args);
      data.value = result;
      
      if (onSuccess) {
        onSuccess(result);
      }
      
      return result;
    } catch (err) {
      error.value = err;
      
      if (onError) {
        onError(err);
      }
      
      throw err;
    } finally {
      loading.value = false;
    }
  };

  if (immediate) {
    onMounted(execute);
  }

  return {
    data: data,
    loading: loading,
    error: error,
    execute: execute,
    refresh: execute
  };
}

// 使用示例
export default {
  setup() {
    const { data, loading, error, refresh } = useAsyncData(
      async (userId) => {
        const response = await fetch(`/api/users/${userId}`);
        return response.json();
      },
      {
        immediate: true,
        onSuccess: (data) => {
          console.log('数据加载成功:', data);
        },
        onError: (error) => {
          console.error('数据加载失败:', error);
        }
      }
    );

    return {
      data,
      loading,
      error,
      refresh
    };
  }
};

总结

Vue 3 Composition API为我们提供了更强大、更灵活的代码组织方式：

核心优势

  1. 逻辑复用：通过自定义组合函数轻松复用逻辑
  2. 代码组织：相关逻辑可以组织在一起，而不是分散在options中
  3. 类型推断：更好的TypeScript支持
  4. 灵活性：更灵活的代码组织方式

最佳实践

  1. 合理使用ref和reactive：基本类型用ref，复杂对象用reactive
  2. 提取组合函数：将可复用逻辑提取为独立的组合函数
  3. 保持单一职责：每个组合函数只负责一个功能
  4. 善用toRefs：解构reactive对象时使用toRefs保持响应性
  5. 合理使用生命周期：在setup中正确使用生命周期钩子

学习路径

  1. 掌握setup函数和响应式API
  2. 学习computed和watch的使用
  3. 理解生命周期钩子
  4. 实践自定义组合函数
  5. 掌握依赖注入和模板引用

Composition API不仅是一种新的API，更是一种新的思维方式。它让我们能够以更函数式、更模块化的方式组织代码，提高了代码的可维护性和可测试性。开始在你的项目中使用Composition API吧，体验Vue 3带来的全新开发体验！

本文首发于掘金，欢迎关注我的专栏获取更多前端技术干货！

JavaScript异步编程深度解析：从回调到Async Await的演进之路

✇掘金 前端
bluceli

引言

JavaScript作为单线程语言，异步编程是其核心特性之一。从最初的回调函数，到Promise，再到Async/Await语法糖，JavaScript的异步编程方式经历了多次演进。本文将深入探讨JavaScript异步编程的8大核心概念，帮助你全面掌握异步编程的艺术。

回调函数时代

1. 基础回调模式

回调函数是JavaScript最早的异步处理方式，虽然简单但容易产生"回调地狱"。

// 基础回调示例
function fetchData(callback) {
  setTimeout(() => {
    const data = { id: 1, name: 'JavaScript' };
    callback(data);
  }, 1000);
}

// 使用回调
fetchData(function(data) {
  console.log('获取到数据:', data);
});

2. 回调地狱问题

当多个异步操作需要按顺序执行时，回调函数会嵌套过深，代码难以维护。

// 回调地狱示例
fetchData(function(data1) {
  processData(data1, function(data2) {
    saveData(data2, function(result) {
      notifyUser(result, function() {
        console.log('所有操作完成');
      });
    });
  });
});

3. 错误处理困境

回调函数的错误处理比较复杂，需要通过额外的参数传递错误信息。

// Node.js风格的错误优先回调
function readFile(filename, callback) {
  fs.readFile(filename, (err, data) => {
    if (err) {
      callback(err, null);
    } else {
      callback(null, data);
    }
  });
}

// 使用示例
readFile('config.json', (err, data) => {
  if (err) {
    console.error('读取文件失败:', err);
    return;
  }
  console.log('文件内容:', data);
});

Promise革命

4. Promise基础用法

Promise的出现解决了回调地狱的问题，提供了更优雅的异步处理方式。

// 创建Promise
function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId > 0) {
        resolve({ id: userId, name: '用户' + userId });
      } else {
        reject(new Error('无效的用户ID'));
      }
    }, 1000);
  });
}

// 使用Promise
fetchUserData(1)
  .then(user => {
    console.log('用户信息:', user);
    return user;
  })
  .catch(error => {
    console.error('获取用户失败:', error);
  });

5. Promise链式调用

Promise支持链式调用，可以优雅地处理多个异步操作。

// Promise链式调用
fetchUserData(1)
  .then(user => {
    console.log('步骤1: 获取用户', user);
    return fetchUserPosts(user.id);
  })
  .then(posts => {
    console.log('步骤2: 获取文章', posts);
    return fetchPostComments(posts[0].id);
  })
  .then(comments => {
    console.log('步骤3: 获取评论', comments);
  })
  .catch(error => {
    console.error('发生错误:', error);
  });

6. Promise静态方法

Promise提供了多个静态方法，用于处理多个Promise实例。

// Promise.all - 所有Promise都成功才成功
Promise.all([
  fetchUserData(1),
  fetchUserData(2),
  fetchUserData(3)
])
  .then(users => {
    console.log('所有用户:', users);
  })
  .catch(error => {
    console.error('至少有一个请求失败:', error);
  });

// Promise.race - 返回最先完成的Promise
Promise.race([
  fetchFromServer1(),
  fetchFromServer2()
])
  .then(result => {
    console.log('最快的结果:', result);
  });

// Promise.allSettled - 等待所有Promise完成
Promise.allSettled([
  fetchUserData(1),
  fetchUserData(-1) // 这个会失败
])
  .then(results => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`请求${index}成功:`, result.value);
      } else {
        console.log(`请求${index}失败:`, result.reason);
      }
    });
  });

// Promise.any - 返回第一个成功的Promise
Promise.any([
  fetchFromBackup1(),
  fetchFromBackup2(),
  fetchFromBackup3()
])
  .then(result => {
    console.log('第一个成功的备份:', result);
  })
  .catch(error => {
    console.error('所有备份都失败:', error);
  });

Async/Await语法糖

7. Async/Await基础

Async/Await是Promise的语法糖，让异步代码看起来像同步代码。

// Async函数定义
async function getUserData() {
  try {
    const user = await fetchUserData(1);
    console.log('用户信息:', user);
    
    const posts = await fetchUserPosts(user.id);
    console.log('用户文章:', posts);
    
    return posts;
  } catch (error) {
    console.error('获取数据失败:', error);
    throw error;
  }
}

// 调用Async函数
getUserData()
  .then(posts => console.log('最终结果:', posts))
  .catch(error => console.error('错误:', error));

8. 并行异步操作

使用Promise.all配合Async/Await可以实现并行异步操作。

// 串行执行（慢）
async function sequentialExecution() {
  const user1 = await fetchUserData(1);
  const user2 = await fetchUserData(2);
  const user3 = await fetchUserData(3);
  return [user1, user2, user3];
}

// 并行执行（快）
async function parallelExecution() {
  const [user1, user2, user3] = await Promise.all([
    fetchUserData(1),
    fetchUserData(2),
    fetchUserData(3)
  ]);
  return [user1, user2, user3];
}

// 批量处理
async function batchProcessing(userIds) {
  const batchSize = 5;
  const results = [];
  
  for (let i = 0; i < userIds.length; i += batchSize) {
    const batch = userIds.slice(i, i + batchSize);
    const batchResults = await Promise.all(
      batch.map(id => fetchUserData(id))
    );
    results.push(...batchResults);
  }
  
  return results;
}

高级异步模式

9. 异步迭代器

异步迭代器可以处理异步的数据流。

// 异步生成器函数
async function* asyncGenerator() {
  let i = 0;
  while (i < 5) {
    await new Promise(resolve => setTimeout(resolve, 1000));
    yield i++;
  }
}

// 使用异步迭代器
async function consumeAsyncGenerator() {
  for await (const value of theAsyncGenerator()) {
    console.log('接收到值:', value);
  }
}

// 实际应用：分页获取数据
async function* fetchPaginatedData(url) {
  let page = 1;
  let hasMore = true;
  
  while (hasMore) {
    const response = await fetch(`${url}?page=${page}`);
    const data = await response.json();
    
    yield data.items;
    
    hasMore = data.hasMore;
    page++;
  }
}

// 使用分页数据
async function processAllData() {
  for await (const items of fetchPaginatedData('/api/data')) {
    items.forEach(item => processItem(item));
  }
}

10. 异步队列

实现一个异步队列，控制并发请求数量。

class AsyncQueue {
  constructor(concurrency = 5) {
    this.concurrency = concurrency;
    this.running = 0;
    this.queue = [];
  }
  
  async add(task) {
    return new Promise((resolve, reject) => {
      this.queue.push({ task, resolve, reject });
      this.runNext();
    });
  }
  
  async runNext() {
    if (this.running >= this.concurrency || this.queue.length === 0) {
      return;
    }
    
    this.running++;
    const { task, resolve, reject } = this.queue.shift();
    
    try {
      const result = await task();
      resolve(result);
    } catch (error) {
      reject(error);
    } finally {
      this.running--;
      this.runNext();
    }
  }
}

// 使用异步队列
const queue = new AsyncQueue(3); // 最多3个并发

const urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3',
  'https://api.example.com/data4',
  'https://api.example.com/data5'
];

const promises = urls.map(url => 
  queue.add(() => fetch(url).then(res => res.json()))
);

const results = await Promise.all(promises);

11. 异步重试机制

实现自动重试的异步操作。

async function retryAsyncOperation(
  operation,
  maxRetries = 3,
  delay = 1000
) {
  let lastError;
  
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      return await operation();
    } catch (error) {
      lastError = error;
      
      if (attempt < maxRetries) {
        console.log(`第${attempt}次尝试失败，${delay}ms后重试...`);
        await new Promise(resolve => setTimeout(resolve, delay));
        delay *= 2; // 指数退避
      }
    }
  }
  
  throw new Error(`操作失败，已重试${maxRetries}次: ${lastError.message}`);
}

// 使用示例
async function fetchWithRetry(url) {
  return retryAsyncOperation(
    () => fetch(url).then(res => {
      if (!res.ok) throw new Error('请求失败');
      return res.json();
    }),
    3,
    1000
  );
}

const data = await fetchWithRetry('https://api.example.com/data');

12. 异步超时控制

为异步操作设置超时时间。

function withTimeout(promise, timeoutMs) {
  return Promise.race([
    promise,
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('操作超时')), timeoutMs)
    )
  ]);
}

// 使用示例
async function fetchWithTimeout(url, timeout = 5000) {
  try {
    const response = await withTimeout(
      fetch(url),
      timeout
    );
    return response.json();
  } catch (error) {
    if (error.message === '操作超时') {
      console.error('请求超时，请检查网络连接');
    }
    throw error;
  }
}

// AbortController实现可取消的请求
async function fetchWithAbort(url, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);
  
  try {
    const response = await fetch(url, {
      signal: controller.signal
    });
    clearTimeout(timeoutId);
    return response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error('请求超时');
    }
    throw error;
  }
}

错误处理最佳实践

13. 全局错误处理

设置全局的异步错误处理器。

// 未捕获的Promise错误
window.addEventListener('unhandledrejection', event => {
  console.error('未处理的Promise拒绝:', event.reason);
  
  // 发送到错误监控服务
  sendToErrorTracking({
    type: 'unhandledRejection',
    error: event.reason,
    stack: event.reason?.stack
  });
});

// 全局错误
window.addEventListener('error', event => {
  console.error('全局错误:', event.error);
  
  sendToErrorTracking({
    type: 'globalError',
    error: event.error,
    message: event.message
  });
});

14. 错误边界模式

在React等框架中实现错误边界。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }
  
  componentDidCatch(error, errorInfo) {
    console.error('组件错误:', error, errorInfo);
    
    // 记录错误
    logErrorToService(error, errorInfo);
  }
  
  render() {
    if (this.state.hasError) {
      return <ErrorFallback error={this.state.error} />;
    }
    
    return this.props.children;
  }
}

// 使用ErrorBoundary
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

性能优化技巧

15. 防抖与节流

在异步操作中使用防抖和节流优化性能。

// 异步防抖
function asyncDebounce(func, delay) {
  let timer = null;
  let pendingPromise = null;
  
  return function(...args) {
    return new Promise((resolve, reject) => {
      if (timer) {
        clearTimeout(timer);
        if (pendingPromise) {
          pendingPromise.reject(new Error('取消'));
        }
      }
      
      pendingPromise = { resolve, reject };
      
      timer = setTimeout(async () => {
        try {
          const result = await func.apply(this, args);
          pendingPromise.resolve(result);
        } catch (error) {
          pendingPromise.reject(error);
        }
        timer = null;
        pendingPromise = null;
      }, delay);
    });
  };
}

// 使用示例
const debouncedSearch = asyncDebounce(
  async (query) => {
    const response = await fetch(`/api/search?q=${query}`);
    return response.json();
  },
  300
);

// 搜索输入框
searchInput.addEventListener('input', async (e) => {
  try {
    const results = await debouncedSearch(e.target.value);
    displayResults(results);
  } catch (error) {
    if (error.message !== '取消') {
      console.error('搜索失败:', error);
    }
  }
});

16. 请求缓存

实现异步请求的缓存机制。

class AsyncCache {
  constructor(ttl = 60000) {
    this.cache = new Map();
    this.ttl = ttl;
  }
  
  async get(key, fetcher) {
    const cached = this.cache.get(key);
    
    if (cached && Date.now() - cached.timestamp < this.ttl) {
      return cached.data;
    }
    
    const data = await fetcher();
    this.cache.set(key, {
      data,
      timestamp: Date.now()
    });
    
    return data;
  }
  
  clear() {
    this.cache.clear();
  }
  
  clearExpired() {
    const now = Date.now();
    for (const [key, value] of this.cache.entries()) {
      if (now - value.timestamp >= this.ttl) {
        this.cache.delete(key);
      }
    }
  }
}

// 使用示例
const cache = new AsyncCache(300000); // 5分钟缓存

async function getUserInfo(userId) {
  return cache.get(`user:${userId}`, async () => {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  });
}

总结

JavaScript异步编程经历了从回调函数到Promise，再到Async/Await的演进，每种方式都有其适用场景：

1. 选择合适的异步方式

  • 简单场景：回调函数仍然适用
  • 链式操作：Promise提供更好的可读性
  • 复杂逻辑：Async/Await让代码更清晰

2. 最佳实践

  • 错误处理：始终使用try/catch或.catch()
  • 并发控制：合理使用Promise.all和队列
  • 性能优化：使用缓存、防抖、节流等技术
  • 可读性：保持异步代码的清晰和简洁

3. 进阶技巧

  • 异步迭代器：处理异步数据流
  • 重试机制：提高操作可靠性
  • 超时控制：防止操作卡死
  • 错误边界：优雅处理错误

掌握JavaScript异步编程，将帮助你构建出更高效、更可靠的前端应用。记住，异步编程的核心是理解事件循环和Promise的工作原理，这样才能写出真正优秀的异步代码。

本文首发于掘金，欢迎关注我的专栏获取更多前端技术干货！

❌