Vue 3 迁移到 Lyt.js: 完整步骤与代码实践

脚本专家

对于已经在使用 Vue 3 的团队来说，Lyt.js 的吸引点在于更小的包体积（约 35KB vs Vue 3 的 44KB）、可选的 Signal 模式以及未来无 VDOM 的 Vapor 模式。Lyt.js 的 API 设计大量借鉴了 Vue 3，迁移成本比想象中低很多。以下从安装到路由的整套迁移流程，附带代码对比和注意事项。

## 一、核心 API 对比概览

| 概念 | Vue 3 | Lyt.js |
|---|---|---|
| 创建应用 | createApp(App) | createApp(App) |
| 定义组件 | defineComponent({...}) | defineComponent({...}) |
| 响应式数据 | reactive() / ref() | reactive() / signal() |
| 计算属性 | computed(() => ...) | computed(() => ...) |
| 侦听器 | watch() / watchEffect() | watch() / effect() |
| 生命周期 | onMounted() 等 | onMounted() 等 |
| 挂载 | app.mount('#app') | app.mount('#app') |

主要区别：ref() 在 Lyt.js 中对应 signal()（Signal 模式），如果使用 Proxy 模式则 reactive() 用法一致。

## 二、迁移步骤

### 1. 安装与卸载

2. # 卸载 Vue 相关包
3. npm uninstall vue @vue/compiler-sfc @vue/runtime-dom
5. # 安装 Lyt.js（无需额外安装 SFC 编译器，框架内置）
6. npm install @lytjs/core

复制代码

Lyt.js 包结构更简洁，不需要 @vue/compiler-sfc 等额外依赖。

### 2. 修改入口文件

将 import 来源从 'vue' 改为 '@lytjs/core'，文件后缀从 .vue 改为 .lyt。

2. // Vue 3 入口
3. import { createApp } from 'vue'
4. import App from './App.vue'
5. createApp(App).mount('#app')
7. // Lyt.js 入口
8. import { createApp } from '@lytjs/core'
9. import App from './App.lyt'
10. createApp(App).mount('#app')

复制代码

### 3. 模板语法迁移

这是改动最大的部分，但模式统一：去掉 v- 前缀和 @ 符号，使用更统一的关键字。

| 功能 | Vue 3 | Lyt.js |
|---|---|---|
| 条件渲染 | v-if / v-else-if / v-else | if / else-if / else |
| 列表渲染 | v-for="item in list" | each="item in list" |
| 双向绑定 | v-model="value" | model="value" |
| 事件绑定 | @click="handle" | on:click="handle" |
| 属性绑定 | :class="cls" | :class="cls"（不变） |
| 插槽 | <slot /> | <slot />（不变） |
| 组件引用 | <MyComponent /> | <MyComponent />（不变） |

示例：

2. <!-- Vue 3 写法 -->
3. <div class="container">
4.   <input v-model="searchText" placeholder="Search..." />
5.   <button @click="search">Search</button>
6.   <ul v-if="results.length > 0">
7.     <li v-for="item in results" :key="item.id"
8.         :class="{ active: item.active }"
9.         @click="select(item)">
10.       {{ item.name }}
11.     </li>
12.   </ul>
13.   <p v-else>No results found.</p>
14. </div>
16. <!-- Lyt.js 写法 -->
17. <div class="container">
18.   <input model="searchText" placeholder="Search..." />
19.   <button on:click="search">Search</button>
20.   <ul if="results.length > 0">
21.     <li each="item in results" :key="item.id"
22.         :class="{ active: item.active }"
23.         on:click="select(item)">
24.       {{ item.name }}
25.     </li>
26.   </ul>
27.   <p else>No results found.</p>
28. </div>

复制代码

改动点：v-if → if，v-for → each，@click → on:click，v-model → model。

### 4. 组件定义（Options API）

唯一变化：data() 改为 state()。

2. // Vue 3
3. import { defineComponent } from 'vue'
4. export default defineComponent({
5.   name: 'MyComponent',
6.   props: { title: String },
7.   emits: ['update'],
8.   data() { return { count: 0 } },
9.   computed: {
10.     double() { return this.count * 2 }
11.   },
12.   methods: {
13.     increment() { this.count++; this.$emit('update') }
14.   },
15.   mounted() { console.log('mounted') }
16. })
18. // Lyt.js
19. import { defineComponent } from '@lytjs/core'
20. export default defineComponent({
21.   name: 'MyComponent',
22.   props: { title: String },
23.   emits: ['update'],
24.   state() { return { count: 0 } },  // data → state
25.   computed: {
26.     double() { return this.count * 2 }
27.   },
28.   methods: {
29.     increment() { this.count++; this.$emit('update') }
30.   },
31.   mounted() { console.log('mounted') }
32. })

复制代码

### 5. Composition API 迁移

使用 Proxy 模式时，只需将 ref() 换成 reactive()，并注意从 @lytjs/core 导入。

2. // Vue 3 Composition API
3. import { ref, computed, onMounted } from 'vue'
4. export default {
5.   setup() {
6.     const count = ref(0)
7.     const double = computed(() => count.value * 2)
8.     const increment = () => count.value++
9.     onMounted(() => console.log('mounted'))
10.     return { count, double, increment }
11.   }
12. }
14. // Lyt.js (Proxy 模式)
15. import { reactive, computed, onMounted } from '@lytjs/core'
16. export default {
17.   setup() {
18.     const state = reactive({ count: 0 })
19.     const double = computed(() => state.count * 2)
20.     const increment = () => state.count++
21.     onMounted(() => console.log('mounted'))
22.     return { ...state, double, increment }
23.   }
24. }

复制代码

若想使用 Lyt.js 提供的 Signal 模式（性能敏感场景推荐）：

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

复制代码

注意：Signal 模式下 count 是一个函数，调用 count() 获取值，通过 update 方法更新。

### 6. 路由迁移

Lyt.js 内置 router 模块，API 与 Vue Router 几乎一致。

2. // Vue Router
3. import { createRouter, createWebHistory } from 'vue-router'
4. const router = createRouter({
5.   history: createWebHistory(),
6.   routes: [{ path: '/', component: Home }]
7. })
9. // Lyt.js Router
10. import { createRouter, createWebHistory } from '@lytjs/router'
11. const router = createRouter({
12.   history: createWebHistory(),
13.   routes: [{ path: '/', component: Home }]
14. })

复制代码

## 三、迁移检查清单

- 入口文件：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 文件类型支持

## 四、迁移后的收益

- 包体积减少约 20%（~35KB vs ~44KB，含编译器）
- 可切换到 Signal 模式提升性能敏感组件
- 未来可启用 Vapor Mode（无 VDOM 渲染）
- 零第三方依赖，降低安全风险
- 模板语法更简洁

## 五、常见问题解答

Q: Vuex/Pinia 状态管理怎么迁移？
A: Lyt.js 内置 provide/inject 结合 reactive/signal 即可实现全局状态管理。复杂场景参考官方文档中的状态管理最佳实践。

Q: Vue 生态 UI 库（如 Element Plus、Ant Design Vue）能用吗？
A: 目前不能直接使用。但 Lyt.js 模板语法与 HTML 完全兼容，可以使用任何原生 HTML/CSS 方案，或等待社区适配。

Q: SSR 怎么迁移？
A: Lyt.js 内置 SSR 渲染器，API 类似 Vue 3。主要调整服务端入口文件，客户端 hydrate 逻辑基本一致。

Q: 遇到问题怎么办？
A: Lyt.js 提供 VitePress 文档站，可以在 GitHub 或 Gitee 仓库提交 Issue。

## 六、总结

从 Vue 3 迁移到 Lyt.js 主要涉及三点修改：import 路径变更、模板指令简化（去掉 v- 前缀）、data() 改为 state()。其余 API、开发模式、组件化思想完全一致，熟悉 Vue 3 的开发者通常只需要几小时即可完成。迁移后获得零依赖架构和 Signal/Vapor 性能加成，对新建项目或需要精简体积的项目来说是值得的选择。

热心网友2

很详细的迁移指南，感谢分享。我最近也在评估从 Vue 3 切换到 Lyt.js，有几个疑问想请教：像 Vue Router 和 Pinia 这类生态库，Lyt.js 有对应的官方方案吗？迁移时有没有遇到第三方组件库（比如 Element Plus）兼容性问题？另外 Vapor 模式现在能直接用吗，还是需要等正式版？