Vue3无痛迁移到Lyt.js的实现示例

如果你是一位 Vue 3 开发者，看到 Lyt.js 的介绍后心动了，但又担心迁移成本太高——放心，这篇指南就是为你准备的。

Lyt.js 的 API 设计大量借鉴了 Vue 3，迁移过程比你想象的要简单得多。让我们一步步来。

相似度有多高？

先来看一个对比表，感受一下两者的相似程度：

核心 API 几乎就是一个模子刻出来的。唯一值得留意的区别是，ref() 在 Lyt.js 中对应的是 signal()（如果你选择 Signal 模式的话）。

第一步：安装

# 卸载 Vuenpm uninstall vue @vue/compiler-sfc @vue/runtime-dom# 安装 Lyt.jsnpm install @lytjs/core

Lyt.js 的包结构更简洁，你不需要额外安装 SFC 编译器之类的依赖——这些框架本身已经内置了。

第二步：修改入口文件

入口文件的改动微乎其微：

// Vue 3import { createApp } from 'vue'import App from './App.vue'createApp(App).mount('#app')// Lyt.jsimport { createApp } from '@lytjs/core'import App from './App.lyt'createApp(App).mount('#app')

注意文件后缀从 .vue 改成了 .lyt。

第三步：修改模板语法

这是迁移过程中改动最大的部分，但同时也是最有意思的。Lyt.js 把 Vue 的指令语法简化了不少：

来看一个模板迁移的具体示例：

变化不大，核心就是去掉 v- 前缀和 @ 符号，用更统一的关键字来替代。

第四步：修改组件定义

Options API 组件几乎可以原封不动地拿过来用：

// Vue 3import { defineComponent } from 'vue'export default defineComponent({  name: 'MyComponent',  props: { title: String },  emits: ['update'],  data() { return { count: 0 } },  computed: {    double() { return this.count * 2 }  },  methods: {    increment() { this.count++; this.$emit('update') }  },  mounted() { console.log('mounted') }})// Lyt.jsimport { defineComponent } from '@lytjs/core'export default defineComponent({  name: 'MyComponent',  props: { title: String },  emits: ['update'],  state() { return { count: 0 } },  // data → state  computed: {    double() { return this.count * 2 }  },  methods: {    increment() { this.count++; this.$emit('update') }  },  mounted() { console.log('mounted') }})

唯一的变化是 data() 变成了 state()，其他完全一致。

第五步：Composition API 迁移

如果你用的是 Composition API，迁移也相当直接：

// Vue 3import { ref, computed, onMounted } from 'vue'export default {  setup() {    const count = ref(0)    const double = computed(() => count.value * 2)    const increment = () => count.value++    onMounted(() => console.log('mounted'))    return { count, double, increment }  }}// Lyt.js (Proxy 模式)import { reactive, computed, onMounted } from '@lytjs/core'export default {  setup() {    const state = reactive({ count: 0 })    const double = computed(() => state.count * 2)    const increment = () => state.count++    onMounted(() => console.log('mounted'))    return { ...state, double, increment }  }}

如果你想在 Lyt.js 里体验 Signal 模式的 Composition API，也可以这样写：

// Lyt.js (Signal 模式)import { signal, computed, effect } from '@lytjs/reactivity/signal'export default {  setup() {    const count = signal(0)    const double = computed(() => count() * 2)    const increment = () => count.update(n => n + 1)    effect(() => console.log('mounted'))    return { count, double, increment }  }}

第六步：路由迁移

Lyt.js 内置了路由模块，API 跟 Vue Router 非常接近：

// Vue Routerimport { createRouter, createWebHistory } from 'vue-router'const router = createRouter({  history: createWebHistory(),  routes: [{ path: '/', component: Home }]})// Lyt.js Routerimport { createRouter, createWebHistory } from '@lytjs/router'const router = createRouter({  history: createWebHistory(),  routes: [{ path: '/', component: Home }]})

迁移清单

为了确保迁移过程不遗漏任何环节，这里提供一份完整的检查清单：

• 入口文件：import 路径从 vue 改为 @lytjs/core
• 文件后缀：.vue 改为 .lyt
• 模板指令：v-if → if, v-for → each, v-model → model, @click → on:click
• 组件选项：data() → state()
• Composition API：ref() → reactive() 或 signal()
• 路由：vue-router → @lytjs/router
• 构建工具：Vite 插件从 @vitejs/plugin-vue 改为 Lyt.js 编译器
• TypeScript：使用 Lyt.js VSCode 扩展来获得 .lyt 文件的类型支持

迁移后的额外收益

迁移到 Lyt.js 之后，你还能收获这些额外好处：

• 更小的包体积：约 35KB，相比 Vue 3 的约 44KB（含编译器）更轻量
• Signal 模式：在性能敏感的组件中可以随时切换到 Signal 模式
• Vapor Mode：未来可以启用无 VDOM 渲染，实现极致性能
• 零依赖：不再受第三方依赖的安全和版本问题困扰
• 增强模板：更简洁的模板语法，降低了模板噪音

常见问题

Q: Vuex/Pinia 怎么办？

Lyt.js 本身内置了简单的状态管理能力，通过 provide/inject 配合 reactive/signal 就可以实现全局状态管理。如果遇到复杂场景，可以参考 Lyt.js 文档中的状态管理最佳实践。

Q: Vue 生态的 UI 库能用吗？

目前 Lyt.js 还不能直接使用 Vue 生态的 UI 库（比如 Element Plus、Ant Design Vue）。不过，Lyt.js 的模板语法与 HTML 完全兼容，你可以使用任何原生 HTML/CSS 的 UI 方案，或者等社区慢慢适配起来。

Q: SSR 怎么迁移？

Lyt.js 内置了 SSR 渲染器，API 与 Vue 3 的 SSR 相似。迁移主要涉及服务端入口文件的调整，客户端的 hydrate 逻辑基本保持一致。

Q: 遇到问题怎么办？

Lyt.js 提供了完整的 VitePress 文档站，你可以在 GitHub/Gitee 仓库提交 Issue，也可以通过贡献指南参与社区建设。

总结

从 Vue 3 迁移到 Lyt.js，核心改动其实只有三点：

1. import 路径变更
2. 模板指令简化（去掉 v- 前缀）
3. data() 改为 state()

其余的 API、开发模式、组件化思想完全一致。讲真，如果你已经熟悉 Vue 3，迁移到 Lyt.js 只需要几个小时。

更重要的是，迁移完成后你将获得零依赖的纯净架构和 Signal/Vapor 带来的性能加成。这笔账怎么算都划算。