为何我们前端从Vue 2迁移到Svelte？

banq

在使用 Vue 2 作为我们的前端框架将近两年之后，宣布不再维护此支持，因此我们决定迁移到一个新的框架。但是选择哪一个：Vue 3 还是 Svelte？

请注意，我们迁移后的目标也是为了改善我们的开发者体验，特别是类型检查、性能和构建时间。我们没有考虑React，因为它需要花费太多时间来学习，而且与Vue和Svelte相比，它没有提供一个开箱即用的解决方案。
Vue和Svelte两者都有相同的单文件组件的概念：逻辑（JavaScript）、结构（HTML）和样式（CSS）在同一个文件中。

因此，我们进行了一些研究，最终选择了Svelte。下面是对原因和方法的解释。

Svelte与Vue 3的比较
Svelte的保留率更好。对于我们的新前端，我们不得不从市场上的两个框架中选择，即Svelte和Vue 3。下面是过去五年中不同框架的保留率（会再次使用/（会再次使用+不会再次使用））的说明。数据是在JS调查领域的开发者中收集的，我们可以看到，Svelte排在第二位，而Vue 3只排在第四位。

这表明，过去使用过Svelte的开发者中，愿意再次使用它的人要比不愿意的人多。

Better typing for Svelte.

                    Vue2    Vue3    Svelte
Component-level typing    Yes    Yes    Yes
Cross-component typing    No    Yes    Yes
Typed events           No    No    Yes

Svelte提供了更好的类型体验，更简单的组件设计过程和内置的类型事件，使其对我们非常友好。

限制性的全局访问。在Svelte中，可以从其他文件中导入枚举，并在模板中使用它们，而Vue 3则没有这样的功能。


语法
就个人而言，我觉得Svelte的语法比Vue更优雅，更方便用户。你可以查看下面的代码块，自己看一下。

Svelte：

<script>
    let firstName = "";
    let town = "";
    $: fullName = "Full name: " + firstName + ' ' + lastName;
    const reset = () => {
        firstName = "";
        lastName = "";
    }
</script>
<main>
    <div>
        <label>First name</label>
        <input type="text" bind:value={firstName}>
        <label>Last name</label>
        <input type="text" bind:value={lastName}>
        <button on:click={reset}>Reset</button>
    </div>
    <div>
        {fullName}
    </div>
</main>
<style>
  main{
    background-color: white;
  }
</style>

Vue：

<template>
  <main>
    <label>First name </label>
    <input type="text" v-model="firstName"/>
    <label>Last name </label>
    <input type="text" v-model="lastName"/>
    <div>
        Full name: {{fullName}} 
    </div>
    <button @click="handleReset">Reset</button>
  </main>
</template>
<script setup>
import { ref, computed } from 'vue'
const firstName = ref('')
const lastName = ref('')

const fullName = computed(() => { return firstName.value + " " + lastName.value; })

function handleReset() {
    firstName.value = ""
    lastName.value = ""
}
</script>
<style scoped>
main{
  background-color: white;
}
</style>

没有额外的HTML div