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 的指令语法：

模板迁移示例：

<!-- Vue 3 写法 --><template>  <div class="container">    <input v-model="searchText" placeholder="Search..." />    <button @click="search">Search</button>    <ul v-if="results.length > 0">      <li v-for="item in results" :key="item.id"          :class="{ active: item.active }"          @click="select(item)">        {{ item.name }}      </li>    </ul>    <p v-else>No results found.</p>  </div></template><!-- Lyt.js 写法 --><template>  <div class="container">    <input model="searchText" placeholder="Search..." />    <button on:click="search">Search</button>    <ul if="results.length > 0">      <li each="item in results" :key="item.id"          :class="{ active: item.active }"          on:click="select(item)">        {{ item.name }}      </li>    </ul>    <p else>No results found.</p>  </div></template>

改动很小，主要是去掉 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 vs 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 的性能加成。这是一笔划算的投资。