从 Vue 3 到 Lyt.js：无痛迁移指南

idcu
238 阅读4分钟

从 Vue 3 到 Lyt.js：无痛迁移指南

作者：Lyt.js Team | 发布时间：2025 年 4 月

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

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

相似度有多高？

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

概念Vue 3Lyt.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')

核心 API 几乎完全一致！唯一的显著区别是 ref() 在 Lyt.js 中对应 signal()（如果你选择 Signal 模式的话）。

第一步：安装

# 卸载 Vue
npm uninstall vue @vue/compiler-sfc @vue/runtime-dom

# 安装 Lyt.js
npm install @lytjs/core

Lyt.js 的包结构更简洁，不需要安装 SFC 编译器等额外依赖（框架内置了编译器）。

第二步：修改入口文件

入口文件的改动非常小：

// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

// Lyt.js
import { createApp } from '@lytjs/core'
import App from './App.lyt'
createApp(App).mount('#app')

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

第三步：修改模板语法

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

功能Vue 3Lyt.js
条件渲染v-if / v-else-if / v-elseif / 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 />

模板迁移示例：

<!-- 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 3
import { 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.js
import { 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 3
import { 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 Router
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/', component: Home }]
})

// Lyt.js Router
import { 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 的性能加成。这是一笔划算的投资。

准备好了吗？开始你的 Lyt.js 之旅吧！

avatar
文章
阅读
粉丝