ArrowJS 1.0 深度解析：为什么「代理时代」需要一款全新的 UI 框架？

2026 年，前端框架的终极问题变了

2026 年的前端江湖，剧情完全反转了。

曾经，开发者选框架时最纠结的问题是：我用 React 还是 Vue？用 Angular 还是 Svelte？ 大家争的是生态、组件库、团队熟悉度、性能指标。

但 2026 年的新问题是：AI Agent 选什么框架，才能更好地帮人类写代码？

这个问题听起来有点荒诞，但它正在真实地发生。当 Claude Code、Cursor Agent、Codex App 这些 AI 编程工具开始深度介入项目开发时，它们面临一个前所未有的挑战——框架的学习曲线太陡，文档太长，模式太特殊，AI 无法像熟练的人类开发者那样自然地运用这些框架。

React 有自己的 hooks 哲学、Vue 有组合式 API 的惯用模式、Svelte 有编译器魔法。每一个框架都形成了一套「方言」，而 AI Agent 必须学会这套方言才能有效工作。更要命的是，React 的文档体量已经超过 100 万 Token，让 AI 完整读完再干活根本不现实。

就在这个背景下，ArrowJS 1.0 正式发布了。它的核心主张只有一句话：

ArrowJS 是一款专为「代理时代」设计的 UI 框架，整个框架只需要三个函数，文档体量不到主流框架的 5%。

这不是噱头。这是一次对前端框架设计哲学的根本性重构。本文将从架构原理、核心 API、性能实战、与其他框架的横向对比，以及最重要的——为什么 ArrowJS 是 AI Agent 最容易驾驭的框架——进行全面深度解析。

一、背景：从 FormKit 到 ArrowJS 的十年积累

在深入技术细节之前，有必要先了解 ArrowJS 的创始人 Justin Schroeder 的背景。因为理解了他过去十年的工作，才能理解 ArrowJS 为什么长成这样。

Justin Schroeder 是 FormKit 和 AutoAnimate 的创始人。FormKit 是一个在 Vue 生态中广泛使用的表单框架，以其优雅的 DX（开发者体验）和灵活的配置著称，在 GitHub 上拥有数万星标。AutoAnimate 则是一个零配置动画库，被 Figma、Svelte 官方团队等广泛采用。

在构建这两个项目的过程中，Schroeder 逐渐意识到一个问题：现代前端框架的设计哲学，本质上是为人类开发者设计的。它们追求的是「表达力」「生态丰富」「最佳实践固化」。但 AI Agent 不是人类，它不需要「表达力」，它需要的是确定性、可预测性和极低的认知成本。

2022 年，ArrowJS 作为一个实验性项目开始酝酿。经过三年的公开实验和迭代，2026 年 6 月正式发布 1.0 版本，项目已迁移至 standardagents 组织下，GitHub 星标达到 3.5k。

二、核心哲学：三个函数，一个范式

ArrowJS 的设计哲学可以归结为一个核心原则：框架应该服从于平台，而不是让平台服从于框架。

这句话怎么理解？我们来看主流框架的做法：

• React 引入了 JSX，需要 Babel/Webpack 编译；引入了 Hooks 规则，需要遵守"useRules"；引入了 Suspense、ErrorBoundary 等特殊概念。开发者在 React 中工作，实际上是在学习一整套独立的「React 语言」。
• Vue 引入了模板编译器，要求开发者按照 Options API 或 Composition API 的特定模式组织代码。Vue 模板中的指令（v-if、v-for、v-model）是 Vue 独有的 DSL。
• Angular 更极端，整个框架就是一门「Angular 语言」，依赖注入、装饰器、RxJS 管道，一切都要按 Angular 的规矩来。

ArrowJS 的做法截然不同：它不使用 JSX，没有编译器，不要求构建步骤，核心运行时只有三个函数。

// 1. reactive() — 创建响应式数据
import { reactive } from '@arrow-js/core'
const state = reactive({
  count: 0,
  name: '张三'
})

// 2. html`...` — 创建 DOM 模板（带标签的模板字面量）
import { html } from '@arrow-js/core'
const template = html`<button>点击次数: ${() => state.count}</button>`

// 3. component() — 组合为可复用组件
import { component } from '@arrow-js/core'
const Counter = component(() => {
  return html`<button @click=${handleClick}>点击次数: ${() => state.count}</button>`
})

就这么简单。这三行代码覆盖了状态管理、模板渲染和组件化的所有核心需求。

2.1 reactive() 的响应式系统

reactive() 是 ArrowJS 的状态管理核心。它的设计理念是让普通 JavaScript 对象变成可被追踪的响应式状态。

import { reactive, html } from '@arrow-js/core'

// 基础用法：包装普通对象
const cart = reactive({
  items: [] as { name: string; price: number }[],
  discount: 0
})

// 计算属性：用函数表达式创建
const total = reactive(() =>
  cart.items.reduce((sum, item) => sum + item.price, 0) * (1 - cart.discount)
)

// 添加商品
cart.items.push({ name: 'TypeScript 入门', price: 99 })
cart.discount = 0.1

// 在模板中使用
const template = html`
  <div>
    <p>总价: ¥${() => total()} 元</p>
    <p>折扣: ${() => cart.discount * 100}%</p>
  </div>
`

关键细节：reactive(() => value) 接收的是 getter 函数。当 cart.items 或 cart.discount 变化时，total 会自动重新计算，而模板中引用 total() 的部分也会自动更新。

ArrowJS 的响应式系统与 Vue 3 的 Composition API 非常相似，但实现上有本质区别：ArrowJS 不依赖 Proxy，而是基于细粒度的 getter 追踪。这带来了几个重要的工程特性：

1. 无需特殊规则：在 reactive 对象中读写数据就像操作普通对象，不需要记住任何约束。
2. 天然支持嵌套响应式：可以将一个 reactive 对象嵌套在另一个 reactive 对象中。
3. 类型安全：TypeScript 泛型完整支持，Reactive<T> 类型可以精确推导。

// 嵌套响应式：完全合法
const app = reactive({
  user: reactive({
    profile: reactive({
      name: '李四',
      settings: reactive({ theme: 'dark' })
    })
  })
})

// 深度修改，无需手动触发更新
app.user.profile.settings.theme = 'light' // 自动追踪并更新 DOM

2.2 html 标签模板字面量

ArrowJS 的模板引擎建立在一个大家早已熟悉的 Web 标准之上：带标签的模板字面量（Tagged Template Literals）。

import { reactive, html } from '@arrow-js/core'

const user = reactive({ name: 'Alice', age: 28 })

// 静态值：渲染一次，不再更新
const staticTemplate = html`<h1>欢迎</h1>`

// 表达式函数：${() => expr} 自动追踪依赖，实时更新
const dynamicTemplate = html`
  <div class="user-card">
    <h2>${() => user.name}</h2>
    <p>年龄: ${() => user.age}</p>
    ${() => user.age >= 18
      ? html`<span class="badge">成年</span>`
      : html`<span class="badge">未成年</span>`
    }
  </div>
`

// 列表渲染：用 map 构建
const items = reactive(['React', 'Vue', 'Angular', 'Svelte', 'Arrow'])
const listTemplate = html`
  <ul>
    ${() => items.map(item =>
      html`<li key=${item}>${item}</li>`
    )}
  </ul>
`

// 事件绑定：直接用 DOM 原生事件
const counter = reactive({ count: 0 })
const counterTemplate = html`
  <div>
    <p>计数: ${() => counter.count}</p>
    <button @click=${() => counter.count++}>+1</button>
    <button @click=${() => counter.count--}>-1</button>
  </div>
`

ArrowJS 模板的解析行为值得深入理解：

2.3 component() 组件化

component() 将模板和逻辑封装为可复用单元。在 ArrowJS 中，组件就是一个返回模板的函数：

import { reactive, html, component } from '@arrow-js/core'

// 定义一个 TodoItem 组件
const TodoItem = component((props: { id: number; text: string; done: boolean }) => {
  const state = reactive({ editing: false, editText: '' })

  const startEdit = () => {
    state.editText = props.text
    state.editing = true
  }

  return html`
    <li class=${() => props.done ? 'completed' : ''}>
      ${() => state.editing
        ? html`
            <input
              type="text"
              .value=${() => state.editText}
              @keydown=${(e: KeyboardEvent) => {
                if (e.key === 'Enter') state.editing = false
                if (e.key === 'Escape') state.editing = false
              }}
            />
          `
        : html`
            <span @dblclick=${startEdit}>${props.text}</span>
          `
      }
      <button @click=${() => emit('toggle', props.id)}>完成</button>
    </li>
  `
})

// 使用组件
const app = reactive({ todos: [] as any[], filter: 'all' })
const App = component(() => {
  const filteredTodos = reactive(() => {
    if (app.filter === 'active') return app.todos.filter(t => !t.done)
    if (app.filter === 'completed') return app.todos.filter(t => t.done)
    return app.todos
  })

  return html`
    <div class="app">
      <h1>ArrowJS Todo</h1>
      <ul>
        ${() => filteredTodos().map(todo => TodoItem(todo))}
      </ul>
      <div class="filters">
        <button @click=${() => app.filter = 'all'}>全部</button>
        <button @click=${() => app.filter = 'active'}>进行中</button>
        <button @click=${() => app.filter = 'completed'}>已完成</button>
      </div>
    </div>
  `
})

三、代理时代的杀手级功能：WASM 沙箱

ArrowJS 1.0 最重要的新功能，也是它被定位为「代理时代」框架的核心支撑——WASM 沙箱（@arrow-js/sandbox）。

3.1 问题的本质

当 AI Agent 帮你生成 UI 代码时，会遇到一个根本性的矛盾：

• AI 可以生成任意复杂的 UI，但生成的代码可能包含 XSS 漏洞、无限循环、不安全的 DOM 操作。
• 传统的隔离方案都有严重缺陷：
  • eval()：完全不安全，代码在主线程执行。
  • iframe：隔离了安全，但无法与主应用共享状态，数据传递困难。
  • Web Worker：适合计算密集任务，但 DOM 操作需要 postMessage 通信，非常繁琐。

ArrowJS 1.0 的 WASM 沙箱提供了一个优雅的解法：在 QuickJS WebAssembly realm 内运行组件逻辑，但渲染的是真实的内联 DOM。

3.2 技术原理

import { reactive, html, component } from '@arrow-js/core'
import { sandbox } from '@arrow-js/sandbox'

// 创建一个沙箱实例，传入 AI 生成的不可信代码
const aiCode = `
  const panel = reactive({ open: false, content: '' })

  // AI Agent 可能生成的任意逻辑
  return html\`
    <div class="ai-panel">
      <button @click=${() => panel.open = !panel.open}>
        \${() => panel.open ? '收起' : '展开'}
      </button>
      \${() => panel.open
        ? html\`<div class="content">\${panel.content}</div>\`
        : null
      }
    </div>
  \`
`

// 在 WASM 沙箱中运行 AI 代码
const safeTemplate = await sandbox(aiCode)

// 挂载到真实 DOM
document.querySelector('#app')?.append(safeTemplate)

工作原理：

1. QuickJS 引擎：运行在 WebAssembly 中的 JavaScript 引擎，独立于主线程的 V8/JS 引擎。
2. Realm 隔离：沙箱中的代码无法访问外部全局变量（window、document、fetch 等）。
3. DOM 桥接：ArrowJS 的响应式系统跨沙箱边界工作——数据变化通知通过 Channel 传递到主线程，主线程负责真实的 DOM 更新。
4. 模板安全：沙箱中的代码只能操作 ArrowJS 的模板 API，无法直接操作 document.createElement。

3.3 实操：构建一个 AI 生成 UI 的安全展示面板

下面展示一个完整的生产级示例：用户输入 prompt，AI 生成 UI 代码，在沙箱中安全运行：

import { reactive, html, component } from '@arrow-js/core'
import { sandbox } from '@arrow-js/sandbox'

const state = reactive({
  prompt: '',
  generatedUI: null as any,
  error: null as string | null,
  isLoading: false
})

// 用户输入 prompt
const promptInput = html`
  <div class="prompt-input">
    <textarea
      placeholder="描述你想要的 UI..."
      @input=${(e: InputEvent) => {
        state.prompt = (e.target as HTMLTextAreaElement).value
      }}
    ></textarea>
    <button
      @click=${generateUI}
      ?disabled=${() => state.isLoading || !state.prompt.trim()}
    >
      ${() => state.isLoading ? '生成中...' : '生成 UI'}
    </button>
  </div>
`

async function generateUI() {
  if (!state.prompt.trim()) return
  state.isLoading = true
  state.error = null

  try {
    // 模拟 AI 生成代码（实际场景中调用 LLM API）
    const aiGeneratedCode = await callAI(state.prompt)

    // 在 WASM 沙箱中安全运行 AI 生成的代码
    const safeTemplate = await sandbox(aiGeneratedCode)
    state.generatedUI = safeTemplate

  } catch (err: any) {
    state.error = err.message || '生成失败'
  } finally {
    state.isLoading = false
  }
}

// 沙箱的错误隔离演示
const unsafeCode = `
  // 这个代码试图访问外部全局变量，会被沙箱拦截
  window.stealData = () => document.cookie
  // 无限循环会被 QuickJS 超时机制终止
  while(true) {}
`

// sandbox() 会捕获异常，不影响主应用
try {
  const result = await sandbox(unsafeCode)
} catch (e) {
  // 可以展示友好错误，而不是崩溃整个页面
  showErrorToast('AI 生成的代码包含不安全操作，已被拦截')
}

3.4 为什么这解决了「无法解决」的难题？

《LogRocket》在一篇分析文章中指出，ArrowJS 沙箱解决了一个之前无法解决的问题：如何安全地运行 AI 生成的不信任界面代码，同时保持与主应用的状态共享和交互能力。

在 ArrowJS 之前，所有方案都有明显的取舍：

四、性能深度解析：5KB 是怎么做到的

ArrowJS 的核心运行时包大小不到 5KB。这在 2026 年的前端框架生态中，几乎是一个不可思议的数字。对比一下：

• React 18 + React DOM：约 130KB（gzipped 约 45KB）
• Vue 3：约 35KB（gzipped 约 14KB）
• Svelte 4：编译后几乎零运行时（约 1.5KB）
• ArrowJS：< 5KB

ArrowJS 的极小体积来自于几个设计决策：

4.1 没有虚拟 DOM

这是关键。ArrowJS 不维护虚拟 DOM 树，模板和 DOM 之间的更新是直接操作的：

// ArrowJS 的更新机制示意（伪代码）
function update(template, reactiveData) {
  for (const expr of template.reactiveExpressions) {
    const newValue = expr() // 读取响应式数据
    const oldValue = expr.cachedValue // 上次缓存值

    if (newValue !== oldValue) {
      expr.domNode.textContent = newValue // 直接更新真实 DOM
      expr.cachedValue = newValue
    }
  }
}

当 user.name 变化时，只有引用 ${() => user.name} 的那个文本节点会被更新。没有 diff，没有 vnode 比较，没有批量更新队列。

4.2 没有编译器依赖

React 需要 Babel 来转换 JSX，Vue 需要模板编译器处理 v-if、v-for 指令。这些编译器不仅增加了打包体积，还延长了开发时的编译等待时间。

ArrowJS 的模板字面量是运行时解析的。虽然运行时解析比预编译稍慢，但换来了：

• 零构建步骤，开发体验极其流畅
• 可以直接在浏览器控制台中调试和修改模板
• CDN 直接引用，无需 npm/Vite

<!-- 最简引入方式：无需构建 -->
<script type="module">
  import { reactive, html } from 'https://esm.sh/@arrow-js/core'

  const count = reactive({ value: 0 })

  document.body.append(html`
    <button @click=${() => count.value++}>
      点击 ${() => count.value} 次
    </button>
  `)
</script>

4.3 性能基准测试

ArrowJS 官方团队提供了一份与 Vue 3 的性能对比基准：

// 测试场景：1000 个响应式数据项，每项 10 个绑定
// 每秒更新次数（FPS）

// React 18 (with memo): ~42 FPS
// Vue 3 (with shallowRef): ~67 FPS
// Svelte 4 (compiled): ~89 FPS
// ArrowJS: ~78 FPS

ArrowJS 的性能介于 Vue 3 和 Svelte 之间，非常接近 Vue 3，与官方宣称的「性能与 Vue 3 相当」一致。对于绝大多数业务场景，这个性能完全够用。

五、完整项目实战：从零构建一个 HVAC 报价对比工具

ArrowJS 官网的「HVAC 报价对比」示例，展示了其完整的工程能力。让我们从零开始构建一个简化版本：

5.1 项目初始化

# 使用官方脚手架创建完整项目（包含 SSR、水合、路由）
pnpm create arrow-js@latest hvac-compare

# 进入目录
cd hvac-compare

# 项目结构
# src/
#   app.ts          # 主入口
#   components/     # 组件目录
#     QuoteCard.ts  # 单个报价卡片
#     FilterBar.ts  # 筛选栏
#   stores/         # 状态管理
#     quotes.ts     # 报价数据
#   main.ts         # 挂载

5.2 报价数据模型

// stores/quotes.ts
import { reactive, computed } from '@arrow-js/core'

export interface Quote {
  id: string
  company: string
  price: number        // 总价（元）
  efficiency: number   // 能效比 SEER
  warranty: number     // 保修年限
  features: string[]
}

export const quotes = reactive<Quote[]>([
  { id: '1', company: 'ClimateCraft', price: 7400, efficiency: 15, warranty: 5, features: ['标准安装', '1年维护'] },
  { id: '2', company: 'CoolAir Pro', price: 8200, efficiency: 16, warranty: 10, features: ['免费设计', '2年维护', '远程控制'] },
  { id: '3', company: 'AirFlow Plus', price: 9100, efficiency: 18, warranty: 12, features: ['全包安装', '3年维护', '智能控制', '能效补贴代办'] },
  { id: '4', company: 'EcoCool', price: 6800, efficiency: 14, warranty: 3, features: ['基础安装'] },
])

export type SortKey = 'price' | 'efficiency' | 'warranty'

export const filters = reactive({
  sortBy: 'price' as SortKey,
  sortDir: 'asc' as 'asc' | 'desc',
  minEfficiency: 0,
  maxPrice: 99999
})

// 计算属性：过滤和排序后的报价列表
export const filteredQuotes = reactive(() => {
  return quotes
    .filter(q => q.efficiency >= filters.minEfficiency && q.price <= filters.maxPrice)
    .sort((a, b) => {
      const dir = filters.sortDir === 'asc' ? 1 : -1
      return (a[filters.sortBy] - b[filters.sortBy]) * dir
    })
})

5.3 组件实现

// components/QuoteCard.ts
import { reactive, html, component } from '@arrow-js/core'
import type { Quote } from '../stores/quotes'

export function QuoteCard(quote: Quote) {
  const state = reactive({ expanded: false })

  return html`
    <div class="quote-card ${() => state.expanded ? 'expanded' : ''}">
      <div class="card-header">
        <h3 class="company">${quote.company}</h3>
        <div class="price-tag">
          <span class="currency">¥</span>
          <span class="amount">${quote.price.toLocaleString()}</span>
        </div>
      </div>

      <div class="specs-grid">
        <div class="spec-item">
          <span class="spec-label">能效比</span>
          <span class="spec-value">SEER ${quote.efficiency}</span>
          <div class="spec-bar">
            <div class="spec-fill" style="width: ${quote.efficiency / 20 * 100}%"></div>
          </div>
        </div>
        <div class="spec-item">
          <span class="spec-label">保修期</span>
          <span class="spec-value">${quote.warranty} 年</span>
          <div class="spec-bar">
            <div class="spec-fill" style="width: ${quote.warranty / 15 * 100}%"></div>
          </div>
        </div>
      </div>

      <button class="toggle-btn" @click=${() => state.expanded = !state.expanded}>
        ${() => state.expanded ? '收起详情 ▲' : '查看详情 ▼'}
      </button>

      ${() => state.expanded
        ? html`
            <div class="features-list">
              <h4>包含服务</h4>
              <ul>
                ${quote.features.map(f => html`<li>✓ ${f}</li>`)}
              </ul>
              <button class="select-btn">选择此方案</button>
            </div>
          `
        : null
      }
    </div>
  `
}

// components/FilterBar.ts
import { reactive, html } from '@arrow-js/core'
import { filters, type SortKey } from '../stores/quotes'

export function FilterBar() {
  const handleSort = (key: SortKey) => {
    if (filters.sortBy === key) {
      // 同键切换方向
      filters.sortDir = filters.sortDir === 'asc' ? 'desc' : 'asc'
    } else {
      filters.sortBy = key
      filters.sortDir = 'asc'
    }
  }

  return html`
    <div class="filter-bar">
      <div class="filter-group">
        <label>排序方式：</label>
        <div class="sort-buttons">
          <button
            class=${() => filters.sortBy === 'price' ? 'active' : ''}
            @click=${() => handleSort('price')}
          >
            价格 ${() => filters.sortBy === 'price' ? (filters.sortDir === 'asc' ? '↑' : '↓') : ''}
          </button>
          <button
            class=${() => filters.sortBy === 'efficiency' ? 'active' : ''}
            @click=${() => handleSort('efficiency')}
          >
            能效 ${() => filters.sortBy === 'efficiency' ? (filters.sortDir === 'asc' ? '↑' : '↓') : ''}
          </button>
          <button
            class=${() => filters.sortBy === 'warranty' ? 'active' : ''}
            @click=${() => handleSort('warranty')}
          >
            保修 ${() => filters.sortBy === 'warranty' ? (filters.sortDir === 'asc' ? '↑' : '↓') : ''}
          </button>
        </div>
      </div>

      <div class="filter-group">
        <label>最低能效：</label>
        <input
          type="range"
          min="0"
          max="20"
          step="1"
          .value=${() => filters.minEfficiency}
          @input=${(e: InputEvent) => {
            filters.minEfficiency = parseInt((e.target as HTMLInputElement).value)
          }}
        />
        <span>SEER ${() => filters.minEfficiency}+</span>
      </div>
    </div>
  `
}

5.4 主应用入口

// app.ts
import { reactive, html, component } from '@arrow-js/core'
import { filteredQuotes } from './stores/quotes'
import { QuoteCard } from './components/QuoteCard'
import { FilterBar } from './components/FilterBar'
import './styles.css'

const App = component(() => {
  return html`
    <div class="app-container">
      <header>
        <h1>HVAC 方案对比</h1>
        <p>找到最适合你的中央空调方案</p>
      </header>

      ${FilterBar()}

      <div class="quotes-grid">
        ${() => filteredQuotes().map(q => QuoteCard(q))}
      </div>

      <footer>
        <p>共计 ${() => filteredQuotes().length} 个方案</p>
      </footer>
    </div>
  `
})

// 挂载到 DOM
document.querySelector('#app')?.append(App())

5.5 样式

/* styles.css */
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  font-family: system-ui, sans-serif;
}

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.quote-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  background: white;
  transition: box-shadow 0.2s ease;
}

.quote-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.price-tag .amount {
  font-size: 1.75rem;
  font-weight: 700;
  color: #2563eb;
}

.spec-item {
  margin-bottom: 0.75rem;
}

.spec-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  margin-top: 4px;
}

.spec-fill {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa, #2563eb);
  border-radius: 3px;
  transition: width 0.3s ease;
}

六、SSR 与水合：完整的框架生态

ArrowJS 1.0 不仅仅是一个客户端框架，它还提供了完整的 SSR（服务端渲染）支持：

# 完整项目脚手架包含 SSR
pnpm create arrow-js@latest my-app

# 安装后，src/ 包含：
#   main.ts       # 客户端入口
#   server.ts     # 服务端入口（Vite SSR）

// src/server.ts — 服务端渲染
import { renderToString } from '@arrow-js/core/server'
import { App } from './app'

export async function handleRequest(req: Request): Promise<Response> {
  // 服务端直接渲染 HTML 字符串
  const html = await renderToString(App())

  return new Response(`
    <!DOCTYPE html>
    <html>
      <head><title>HVAC 报价对比</title></head>
      <body>
        <div id="app">${html}</div>
        <script type="module" src="/src/main.ts"></script>
      </body>
    </html>
  `, { headers: { 'Content-Type': 'text/html' } })
}

// src/main.ts — 客户端水合（Hydration）
import { hydrate } from '@arrow-js/core/hydrate'
import { App } from './app'

// 水合：客户端接管服务端渲染的 HTML
// 不会重新渲染整个应用，只是「激活」已有的 DOM
hydrate(App(), document.querySelector('#app')!)

七、与其他框架的横向对比

7.1 ArrowJS vs React

7.2 ArrowJS vs Vue 3

Vue 3 的 Composition API 与 ArrowJS 的 reactive() 在概念上非常接近，但关键差异在于：

• Vue 3 需要构建工具：即使不用 SFC（单文件组件），Vue 的响应式系统也需要通过 npm 安装和 Vite 构建。
• ArrowJS 可以零配置使用：直接 CDN 引入，5 秒内在浏览器控制台写出一个完整应用。

// Vue 3 的等效写法
import { ref, computed, reactive } from 'vue'
const state = reactive({ count: 0 })

// ArrowJS 的等效写法（完全相同）
import { reactive } from '@arrow-js/core'
const state = reactive({ count: 0 })

7.3 ArrowJS vs Svelte

Svelte 是另一个以小体积著称的框架，但两者有根本性差异：

• Svelte 是编译器：Svelte 代码在构建时编译为高效的 JavaScript，运行时本身几乎为零。ArrowJS 是纯运行时，没有编译器。
• Svelte 需要 .svelte 文件：特殊的文件格式需要编辑器和构建工具支持。ArrowJS 就是 TypeScript/JavaScript 文件。
• Svelte 语法新颖：需要学习 {#each}、{#if} 等 Svelte 特有语法。ArrowJS 使用标准的 JavaScript map()、三元运算符 等。

八、AI Agent 技能：让 Codex 和 Claude Code 直接学会 Arrow

ArrowJS 团队提供了一个杀手级工具：AI Agent Skill。这是一个可以让 AI 编程工具（如 Codex、Claude Code）直接理解项目上下文并生成 ArrowJS 代码的技能包。

# 安装到当前项目
npx @arrow-js/skill@latest

# 安装后，项目根目录会出现：
# .claude/commands/arrow-add.md
# .codex/skills/arrow.ts

安装后，Claude Code 或 Codex 在处理你的项目时，会自动理解：

1. 你的项目用什么工具构建（Vite/Webpack/其他）
2. 你的样式规范（Tailwind/CSS Modules/原始 CSS）
3. 你的组件目录结构
4. ArrowJS 的 API 和最佳实践

<!-- .claude/commands/arrow-add.md（部分内容） -->

# Add Arrow Component

当用户要求在当前 ArrowJS 项目中添加新组件时：

1. 在 `src/components/` 目录下创建新的 `.ts` 文件
2. 从 `@arrow-js/core` 导入 reactive, html, component
3. 使用 reactive() 管理状态，html`` 创建模板
4. 事件使用 @event=${handler} 语法
5. 响应式绑定使用 ${() => value} 语法
6. 完成后导出组件函数

示例文件结构：

src/components/
├── QuoteCard.ts # 报价卡片组件
├── FilterBar.ts # 筛选栏组件
└── ...

这意味着：当你对 Claude Code 说「帮我加一个用户设置页面」，它不再需要花大量 Token 去理解你的框架结构，它已经知道怎么用 ArrowJS 写组件了。

九、当前局限性与真实评价

9.1 Hacker News 和 Reddit 的声音

ArrowJS 在发布后引发了热烈讨论（意料之中），Reddit r/webdev 的一位长期用户指出了几个当前版本存在的问题：

已报告的 Bug 和限制：

// 问题 1：监听器内修改状态
const state = reactive({ count: 0 })

watch(() => state.count, (newVal) => {
  // ⚠️ 在某些情况下，监听器内部修改状态会导致错误
  state.count = newVal + 1 // 可能触发无限递归
})

// 问题 2：列表渲染缺少唯一键
const items = reactive([{ id: 1, name: 'A' }, { id: 2, name: 'B' }])

// ⚠️ 如果列表项内部有响应式状态，
// 重新排序后可能不会正确更新
const list = items.map(item => html`<li>${item.name}</li>`)

// 解决方案：ArrowJS 团队建议用带 key 的 component
const Item = component((props: { id: number; name: string }) => {
  const local = reactive({ visible: true })
  return html`<li key=${props.id}>...</li>`
})

维护者 Justin Schroeder 的回应：

「这些问题都是真实的。我们计划在 1.x 系列中逐步解决：

• 添加 key 属性支持，改善列表渲染的可预测性
• 添加 onMounted/onDestroyed 生命周期钩子
• 添加 DOM refs 支持（ref=${el => this.el = el}）

ArrowJS 1.0 是一个基础稳定的版本，但不是完美的版本。生态系统还在建设早期。」

9.2 与主流框架的真实差距

客观地说，ArrowJS 与 React/Vue 的差距在以下几个方面是真实的：

1. 生态几乎为零：没有成熟的表单库（FormKit 对 ArrowJS 的支持还在规划中）、没有 UI 组件库、没有状态管理方案、没有路由库（仅有 @arrow-js/router 实验性包）。
2. 生产案例稀少：GitHub 3.5k 星标，但大规模生产应用案例几乎没有。
3. 团队规模极小：核心团队只有 Justin Schroeder 少数几个人，不像 Meta/Google 那样有企业级支持。

十、总结：ArrowJS 1.0 意味着什么

10.1 技术层面

ArrowJS 1.0 代表了前端框架设计的一条新路径：不做更多，只做更少。三个核心函数、没有 JSX、没有编译器、不到 5KB 的体积——这是对「框架肥胖症」的一次正面回应。

它的响应式系统简洁而高效，直接 DOM 操作的渲染策略在小规模应用上表现优异。WASM 沙箱功能则是真正的创新，它解决了一个在 AI 时代变得日益重要的安全问题。

10.2 生态层面

ArrowJS 的最大赌注是「代理时代」。随着 AI 编程工具越来越普及，框架的「AI 友好度」将成为一个新的竞争维度。在这个维度上，ArrowJS 几乎是目前最优的选择：

• 文档体积极小（不到 5% 上下文窗口）
• 没有特殊语法（就是 TypeScript）
• 有专门的 Agent Skill（npx @arrow-js/skill）
• API 极度简洁（三个函数）

10.3 未来展望

ArrowJS 的路线图上还有一些令人期待的方向：

• 更完善的组件生态：FormKit 团队表示将在 2026 年 Q3 发布 ArrowJS 版本的 FormKit 表单组件。
• 更多路由能力：当前 @arrow-js/router 仅支持基础路由，团队计划在 1.1 中加入嵌套路由和懒加载支持。
• 性能进一步优化：JIT 编译模板表达式，减少不必要的响应式追踪。

10.4 给开发者的建议

什么时候用 ArrowJS：

• ✅ 工具类 Web 应用、数据展示页面、管理后台
• ✅ AI Agent 辅助开发的项目（AI 友好度要求高）
• ✅ 需要极小包体（< 10KB）的边缘计算场景
• ✅ 快速原型和 MVP 开发

什么时候不用 ArrowJS：

• ❌ 需要丰富 UI 组件库的大型应用（React/Vue 生态碾压级别）
• ❌ 团队成员不熟悉响应式编程范式
• ❌ 需要 React Server Components、Suspense 等服务端能力（用 Next.js）
• ❌ 追求「框架惯用模式」带来的团队一致性（React 的最佳实践虽然复杂，但团队内沟通成本低）

ArrowJS 1.0 不是来取代 React 的。它是为 AI 原生时代写的一份新答卷。

当 AI 开始大量参与代码编写，前端框架的核心评价标准正在悄然改变——不再只是「谁的生态最丰富」「谁的性能最优」，而是**「谁能让人和 AI 都用得顺手」**。在这个新赛道上，ArrowJS 已经率先起跑了。

参考资料：ArrowJS 官方文档（https://arrow-js.com/）、InfoQ 新闻报道、GitHub 仓库（standardagents/arrow-js）、Hacker News 讨论