Typescript & Javascript

融合 JSX 与
响应式 的现代框架

Vitarx 提供引擎级视图控制能力，精确依赖追踪避免不必要渲染， 完整 TypeScript 支持，让前端开发更高效、更优雅。

快速开始 GitHub
$npm install vitarx
6
核心包
100%
TypeScript
MIT
开源协议
SSR
服务端渲染
Features

为现代前端而生

每一个特性都经过精心设计，让开发体验和运行性能达到最佳平衡。

🚀

JSX 支持

使用熟悉的 JSX 语法构建界面，完整类型推导支持，享受与 React 相似的开发体验。

🔧

精细响应式系统

提供 ref、reactive、computed、watch 等精细响应式 API，精确依赖追踪，避免不必要的渲染。

⚡️

高性能更新

引擎级视图控制能力，精确到节点级别的更新策略，极致性能表现。

🎯

组件化开发

函数组件 + 生命周期钩子，支持 For、Freeze 等高级视图控制组件。

💉

依赖注入

应用级和组件级 provide / inject，优雅地管理跨层级依赖关系。

📦

丰富的内置组件

Suspense、Transition、Freeze、Lazy、Teleport 开箱即用，覆盖常见场景。

🎯

指令系统

内置 v-show、v-html、v-text，支持自定义指令扩展，灵活控制 DOM 行为。

📘

TypeScript 完整支持

类型推导完整，开发体验友好，在编辑器中获得智能提示和类型检查。

Code

简洁而强大

用最少的代码实现最多的功能，感受 Vitarx 的开发效率。

响应式状态管理

使用 ref 和 reactive 创建响应式数据，computed 自动追踪依赖，watch 监听变化。

  • ref / reactive 创建响应式数据
  • computed 自动推导计算属性
  • watch 精确监听数据变化
  • 完整 TypeScript 类型推导
counter.tsx
import { ref, computed, watch } from 'vitarx'

const count = ref(0)
const doubled = computed(() => count.value * 2)

watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} → ${newVal}`)
})

function increment() {
  count.value++
}
App.tsx
import { createApp, ref } from 'vitarx'

function App() {
  const items = ref([
    { id: 1, text: 'Learn Vitarx' },
    { id: 2, text: 'Build something' },
  ])

  return (
    <div class="app">
      <h1>Todo App</h1>
      <For each={items} key="id">
        {(item) => <li>{item.text}</li>}
      </For>
    </div>
  )
}

createApp(App).mount('#root')

组件化开发

函数组件 + JSX 语法，配合 For、Suspense 等内置组件，轻松构建复杂 UI。

  • 函数组件，简洁直观
  • For 组件高效列表渲染
  • Suspense 异步数据加载
  • createApp 快速启动应用