什么是 ActView？

ActView 是一个轻量级、响应式驱动的 JSX 前端框架。

它的名字由两个生态交汇而来：

• Act
   —— 取自 React 的后三个字母。ActView 继承了 React 的 JSX 写法：灵活自由，不需要记忆 v-if、v-for、v-model 等大量模板指令，条件、循环、事件绑定都可以直接用原生 JavaScript 表达式完成；
• View
   —— 与 Vue 的发音相近。ActView 继承了 Vue 的响应式系统：ref / reactive / computed / watch 等，数据变化自动驱动视图更新；相比 React 的 useEffect 等 API，更容易理解，简单、直观。

下面是一个最基本的示例：

上面的示例展示了 ActView 的两个核心功能：

• JSX 声明式渲染
  ：ActView 使用 JSX 来描述 UI 与状态之间的关系——没有模板语法、没有 {{ }} 插值，条件、循环、事件绑定都是原生 JavaScript 表达式，灵活且类型安全；
• 响应性
  ：ActView 的 ref / reactive / computed / watch 等 API 会自动跟踪 JavaScript 状态，并在其发生变化时响应式地更新 DOM。

核心特性

⚡ 响应式系统

基于 Proxy 的依赖收集与触发（track / trigger），提供：

• ref
   / reactive / shallowReactive / readonly / markRaw
• computed
  （惰性求值 + 脏标记缓存）
• watch
   / watchEffect（微任务批量触发，返回停止函数）
• EffectScope
   作用域管理，组件卸载时自动清理所有 effect

温度转换——computed使用演示

import { ref, computed } from 'actview'export function App() {  const celsius = ref(20)  // 可写 computed：读华氏走 get（F = C × 9/5 + 32），改华氏走 set 反写摄氏  const fahrenheit = computed({    get: () => Math.round((celsius.value * 9) / 5 + 32),    set: (v) => {      celsius.value = Number.isNaN(v) ? 0 : ((v - 32) * 5) / 9    }  })  function setCelsius(e: FormEvent<HTMLInputElement>) {    const v = Number(e.target.value)    celsius.value = Number.isNaN(v) ? 0 : v  }  return (    <divclass="av-demo">      <label>        摄氏（°C）：        <inputtype="number"value={String(celsius.value)}oninput={setCelsius} />      </label>      <labelclass="av-gap">        华氏（°F）：        <input          type="number"          value={String(fahrenheit.value)}          oninput={(e) => (fahrenheit.value = Number(e.target.value))}        />      </label>      <pclass="av-result">        当前温度：{celsius.value}°C = {fahrenheit.value}°F      </p>    </div>  )}

🧩 JSX 组件模型

组件直接使用 JSX 书写 UI：没有模板语法，无需记忆 v-if / v-for / v-model 等大量指令，条件、循环、事件绑定都是原生 JavaScript 表达式，灵活、组合自由且类型安全。

与直接返回 JSX 的普通函数不同，ActView 在构建时会对函数组件做一次代码转换（@actview/plugin 基于 Babel）：把组件体拆分为 setup 与 render 两个阶段——setup 负责创建状态（挂载时只执行一次），render 负责生成 UI 描述（挂载时与依赖更新时都会执行，生成 UI 描述）：

// 你写的源码（普通 JSX 函数组件）function App() {  const count = ref(0)  return (    <buttononclick={() => count.value++}>      {count.value}    </button>  )}// 构建后的产物（示意）：函数体被拆成 setup + render 两部分const App = defineComponent(function () {  const count = ref(0) // setup：组件挂载时只执行一次  return () => (       // render：挂载时与依赖更新时都会执行，生成 UI 描述    <buttononclick={() => count.value++}>      {count.value}    </button>  )})

转换后，组件被拆成两个阶段：

• setup
  ：整个生命周期中只执行一次——创建响应式状态、注册生命周期钩子、创建侦听器；
• render
  ：挂载时和每次依赖更新时都会执行——读取数据、产出 VNode，与旧树做 diff。

这正是 ActView 与普通 JSX 写法的核心区别：你写的还是同一个函数，但构建期的代码转换赋予了它「setup 只跑一次、挂载与依赖更新只重跑渲染函数」的组件语义。

🛡️ 内置组件

开箱即用：

🧪 SSR 支持

renderToString(vnode) 是纯函数序列化，不依赖 DOM，可在 Node 端直接生成静态 HTML。

🚦 内置路由

@actview/router 提供 createRouter / createWebHistory / createMemoryHistory / RouterLink / RouterView。路由状态 currentRoute 本身是响应式的——路由变化自动触发组件切换。

没有的东西（设计取舍）

ActView 刻意没有以下 Vue 特性，遇到时请改用 JSX 等价写法：

现在开始

准备好动手了吗？直接跳到 快速上手，开始构建你的第一个 ActView 应用。

项目地址 欢迎提交issue和PR