为何我们前端从Vue 2迁移到Svelte？
source link: https://www.jdon.com/63603
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
为何我们前端从Vue 2迁移到Svelte？
在使用 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 <template>。在Svelte中，你可以直接编写你自己的HTML。
样式在Svelte中是自动作用域化的，这对维护性来说是个好点，有助于避免CSS的副作用。每个组件的样式都是孤立的，只影响该组件，不影响其父级或子级。
不需要计算属性来更新数据，在Svelte中，感觉更像是用纯javascript编码，你只需要专注于编写一个箭头函数。
const reset = () => {firstName = "";lastName = "";}
|
在Svelte中，只有单括号是必要的：
//Svelte
{fullName}
//Vue
{{fullName}}
|
请注意，这个分析是基于上述具体的代码模板，并不打算对框架的差异进行详细解释。如需进一步信息，请随时上网查询。
添加纯js插件更简单。下面是一个使用Svelte和Prism.js的语法高亮集成用例。
// Prism.svelte
<script>
import Prism from 'prismjs';
export let code;
export let lang = 'javascript';
</script>
<pre><code class="language-{lang}">{@html
Prism.highlight(code, Prism.languages[lang], lang)
}</code></pre>
// App.svelte
<script>
import Prism from './Prism.svelte';
let code = 'export const hello =\n\t(name) => {console.log(`Hello ${name}!`)};';
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism-dark.min.css" integrity="sha512-Njdz7T/p6Ud1FiTMqH87bzDxaZBsVNebOWmacBjMdgWyeIhUSFU4V52oGwo3sT+ud+lyIE98sS291/zxBfozKw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<Prism {code} />
|
编译代码时没有虚拟DOM。Svelte和Vue的主要区别在于减少了浏览器和应用程序之间的层数，这使得任务的完成更加优化和快速。
自动更新。在声明变量的帮助下，Svelte可以自动更新你的数据。这样一来，你就不需要等待变化反映在你的虚拟结构中，从而获得更好的用户体验。
Svelte也有其缺点
当然，Svelte也有缺点，比如说社区相对较小，因为它是在2019年才出现的。但是，随着越来越多的开发者可能会接受它的品质和用户友好的内容，支持以及社区在未来可能会发展和壮大。在Github上已经有定期的和非常好的解释的更新，可以很容易地访问。
因此，在回顾了这一分析结果后，我们决定继续使用Svelte和Svelte Kit，尽管在迁移时SvelteKit仍在积极开发中。(见下文)
我们选择哪种方法来处理迁移？
时间：我们选择在8月进行迁移，当时使用该应用程序的人较少。
时间长度：我们花了两周时间将所有文件从Vue迁移到Svelte。
开发人员的数量：两名前端开发者全职工作了两周，另一名开发者全职工作了一周，所以有三名开发者参与。
工作流程：首先，我们使用Notion工具将我们的票据归属给团队的开发人员。然后，我们开始在Storybook中创建我们的新组件，最后，每个开发人员被赋予一些页面，在Svelte中重写。
作为一家初创公司，迁移比较简单，因为我们没有一千多份文件需要重写，所以我们可以快速执行。然而，我们冒着风险，在SvelteKit还在积极开发的时候就开始迁移，这导致我们在迁移后一个月才不得不做出重大的改变。但是SvelteKit专业的知识团队为我们提供了一个命令（npx svelte-migrate routes）和一个解释得非常清楚的迁移指南，真正帮助我们快速适应新的更新。
此外，在9月份，SvelteKit团队宣布，该框架终于进入了候选发布阶段，这意味着它的稳定性得到了保证。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK