Lyt.js 深度解析：零依赖的 Vue 3 兼容框架，35KB 颠覆前端生态格局

Vue 3 很好，但它真的够轻吗？

当你审视一个 Vue 3 项目的 node_modules 时，很难忽视那庞大的依赖树——更重的包体积、更复杂的抽象层、以及在某些场景下并不理想的运行时性能。一位开发者带着这些问题，发起了一个大胆的实验：能不能在保留 Vue 3 开发体验的前提下，做一个更轻、更快、更干净的框架？

这就是 Lyt.js。

Lyt.js v5.0.1 是一个零依赖、纯 TypeScript 实现的前端框架，核心包 gzip 仅 ~35KB（Vue 3 约 ~44KB），同时提供了 Vue 3 级别的开发体验。项目地址在 gitee.com/lytjs/lytjs，npm 上已有 32 个子包，覆盖路由、状态管理、UI 组件、SSR 等完整生态，月下载量超过 1100 次。本文基于 v5.0.1 实际源码，从设计哲学、API 兼容性、迁移路径等维度，做一次全面深度解析。

核心哲学：熟悉感即生产力

Lyt.js 的设计目标非常明确：让 Vue 3 开发者几乎不需要学习新知识，就能迁移到一个更轻量的框架。

这在 API 设计上体现得淋漓尽致。创建一个 Vue 3 应用：

import { createApp } from 'vue'
const app = createApp(App)
app.mount('#app')

在 Lyt.js 中，一模一样：

import { createApp } from '@lytjs/core'
const app = createApp(App)
app.mount('#app')

核心 API 几乎 1:1 对应，这是 Lyt.js 和其他"看起来像 Vue"的框架最本质的区别——它不是模仿，是兼容。

响应式系统：Proxy + Signal 双轨并行

Vue 3 兼容模式

Lyt.js 通过 @lytjs/compat 包，提供了 Vue 3 全部响应式 API 的兼容层：

import {
  ref, reactive, computed, watch, watchEffect,
  shallowRef, shallowReactive, readonly,
  toRef, toRefs, unref, triggerRef,
  isRef, isReactive, isReadonly, isProxy,
  toRaw, markRaw, nextTick,
  provide, inject,
  onMounted, onUpdated, onUnmounted,
  h, Fragment, defineAsyncComponent,
} from '@lytjs/compat'

这段 import 可以直接复制到 Lyt.js 项目中使用，零修改。

Signal 模式：性能敏感场景的新选择

除了兼容 Vue 3 的 Proxy 响应式，Lyt.js 还提供了 Signal 响应式，适合高频更新场景：

import { signal, computed as computedSignal, batch } from '@lytjs/reactivity'

const count = signal(0)
const doubled = computedSignal(() => count() * 2)

// 读取用函数调用，更新用 .set()
count.set(count() + 1)
console.log(doubled()) // 4

// 批量更新，只触发一次视图更新
batch(() => {
  count.set(1)
  count.set(2)
  count.set(3)
})

Signal 的优势在于细粒度更新——只订阅了 count 的组件才会重新渲染，而 Vue 3 的 Proxy 响应式在某些场景下会触发更多不必要的更新。

模板语法：去掉 v- 前缀，更接近原生 HTML

这是 Lyt.js 和 Vue 3 差异最大的地方，也是争议最大的地方。

Vue 3 模板：

<template>
  <div v-if="loading">加载中...</div>
  <input v-model="query" />
  <button @click="handleClick">提交</button>
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</template>

Lyt.js 模板：

<template>
  <div if="loading">加载中...</div>
  <input model="query" />
  <button on:click="handleClick">提交</button>
  <li each="item in list" :key="item.id">{{ item.name }}</li>
</template>

去掉 v- 前缀后，模板更接近原生 HTML 语义，降低了从 HTML/Jinja2/Django 模板迁移过来的认知成本。不过这确实是一个 breaking change，Vue 3 项目迁移时需要借助 CLI 工具批量处理。

组件迁移：Composition API 几乎不需要改

这是 Lyt.js 最良心的地方——Composition API 写法完全一致：

// Vue 3 和 Lyt.js 完全相同
import { ref, computed, onMounted } from '@lytjs/core'

export default defineComponent({
  props: { title: String },
  emits: ['update'],
  setup(props, { emit }) {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)

    function increment() {
      count.value++
      emit('update', count.value)
    }

    onMounted(() => { console.log('mounted!') })
    return { count, doubled, increment }
  }
})

Options API 也只需要改一个词：data() → state()，其余 computed、methods、watch、props 完全兼容。

路由与状态管理：Pinia 直接复用思路

Lyt.js 的路由 @lytjs/router 与 Vue Router 高度一致，只是 history 配置方式略有不同：

// Lyt.js Router — 与 Vue Router 几乎相同
import { createRouter, createWebHistory } from '@lytjs/router'

const router = createRouter({
  mode: 'history',  // 注意：Lyt.js 用 mode，Vue Router 用 history
  routes: [
    { path: '/', component: Home },
    { path: '/user/:id', component: User },
  ]
})

router.beforeEach((to, from, next) => { next() })

状态管理 @lytjs/store 采用了 Pinia 的设计思路，API 高度相似：

import { createStore } from '@lytjs/store'

const counterStore = createStore({
  name: 'counter',
  state: () => ({ count: 0 }),
  getters: { doubled: (state) => state.count * 2 },
  actions: {
    increment() { this.count++ },
    async fetchData() { /* 异步 action */ }
  }
})

// 额外能力：状态订阅和重置
counterStore.$subscribe(({ key, newValue, oldValue }) => {
  console.log(`${key} changed from ${oldValue} to ${newValue}`)
})
counterStore.$reset()

SSR：内置三种渲染方式 + 元框架 LytX

Lyt.js 内置了完整的 SSR 渲染器，提供三种渲染 API：

// 同步字符串渲染
import { renderToString } from '@lytjs/renderer/ssr'
const html = renderToString(createVNode(App))

// 流式渲染（适合 Node.js  streams）
import { renderToStream } from '@lytjs/renderer/ssr'
const stream = renderToStream(createVNode(App))

// 异步生成器渲染
import { renderToStreamGenerator } from '@lytjs/renderer/ssr'
for await (const chunk of renderToStreamGenerator(createVNode(App))) {
  process.stdout.write(chunk)
}

同时，元框架 LytX (@lytjs/lytx) 提供了 SSR/SSG/SPA 全栈能力，对标 Nuxt.js，支持文件系统路由、API 路由、中间件、布局系统等特性。

Vapor Mode：无 VDOM 的性能突破

这是 Lyt.js 真正拉开差距的特性。Vue 3 的 Vapor Mode 仍处于实验阶段，而 Lyt.js 的 Vapor Mode 已经是稳定功能。

Vapor Mode 的核心思想是绕过虚拟 DOM，直接操作真实 DOM。对于高频更新的组件（如实时数据面板、动画列表），VDOM 的 diff 开销是性能瓶颈，而 Vapor Mode 可以将渲染性能提升到接近原生 JavaScript 的水准：

export default defineComponent({
  reactivityMode: 'vapor',  // 启用 Vapor Mode
  setup() {
    // 组件会以无 VDOM 模式运行
  }
})

完整生态：32 个子包覆盖全场景

迁移路径：渐进式，一步步来

Lyt.js 提供了完整的迁移工具 @lytjs/compat，支持渐进式迁移：

# 1. 安装 Lyt.js
npm uninstall vue vue-router pinia @vitejs/plugin-vue
npm install @lytjs/core @lytjs/router @lytjs/store @lytjs/compiler

# 2. 批量重命名 .vue -> .lyt
find src -name "*.vue" -exec sh -c 'mv "$0" "${0%.vue}.lyt"' {} \;

# 3. 使用 CLI 工具自动转换
npx @lytjs/compat vue-to-lyt ./src --recursive --dry-run  # 预览
npx @lytjs/compat vue-to-lyt ./src --recursive             # 正式转换

甚至提供了 SFC 转换 API，可以集成到 CI/CD 流程中：

import { convertVueSfcToLyt, migrateVueFile } from '@lytjs/compat'

const report = migrateVueFile(vueSourceCode)
console.log('兼容性评分:', report.compatibilityScore)  // 0-100
console.log('错误数:', report.errorCount)
console.log('警告数:', report.warningCount)

总结

Lyt.js 是一个定位清晰的产品：面向 Vue 3 开发者，提供一个更轻量、更现代的替代方案，同时最大限度地复用已有知识。

核心优势：

• 35KB 核心：比 Vue 3 轻约 20%，零第三方依赖
• API 1:1 兼容：Composition API 完全一致，Options API 仅需改一个词
• Signal + Proxy 双轨：兼顾兼容性和性能敏感场景
• Vapor Mode 稳定：无 VDOM 渲染，性能接近原生 JS
• 完整生态：32 个子包，覆盖路由、状态管理、UI 组件、SSR、元框架

对于正在使用 Vue 3 且对包体积、运行时性能有追求的团队，Lyt.js 是一个值得认真评估的选择。迁移成本比想象中低很多——不妨先从一个小项目试试水。

项目地址：gitee.com/lytjs/lytjs
npm：npm install @lytjs/core