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

# 卸载 Vue
npm uninstall vue @vue/compiler-sfc @vue/runtime-dom
# 安装 Lyt.js
npm install @lytjs/core

// 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 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>

// 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') }
})

// 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 模式)
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 }
  }
}

// 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 }]
})