从Vue2迁徙到Svelte_互联网资讯__分享互联网新鲜有趣好玩的事物-云易优站长平台

本文翻译自https://escaPE.tech/blog/from-vue2-to-svelte/

在利用Vue2做为我们的前端框架差不多快两年后,它被颁布发表不再继续维护，因而我们决定迁徙到一个新的框架。但是哪一个是我们应该选择的呢？Vue3 OR Svelte。

需要留意的是在此次迁徙中我们也需要提拔我们的开发体验，出格是在类型查抄, 高性能以及构建时间方面。我们没有考虑React，因为我们没有太多的时间去进修。同时相关于Vue和Svelte，它也没有供给一个开箱即用的计划。此外，Vue和Svelte利用了不异的单文件组件概念：逻辑(javascript), 构造(html), 款式(CSS)在统一个文件中。

我们做了一些研究，最末选定了Svelte。下面一些解释关于为什么选择Svelte:

Svelte PK Vue3

Svelte拥有更好的进修留存率。我们选择了市场上两个新的前端框架，Vue3和Svelte。下面是一个插图，显示的是差别框架在过去5年的留存率。从State of JS survey搜集的该范畴的开发人员的数据，我们能够看到Svelte来到了第2的位置，而Vue3仅排名第4。

In 2021 Svelte was in the 2nd position and Vue 3 in 4th position (source: State of JS)

那张图显示过去利用Svelte的开发人员在未来更愿意利用他们

更好的类型查抄

Svelte 通过更简单的组件设想过程和内置类型化事务供给更好的类型查抄体验，那对我们来说十分人道化。

严酷的全局拜候

在Svelte中能够从其他文件导入列举，并在模板中利用它们，在Vue3中是不存在那种情形的。

Escape Benchmark about frontend stack

语法

主不雅的，我认为Svelte的语法比拟于Vue愈加的人道化和友好。你能够看看下面那些代码块，想下本身是什么觉得。

Svelte

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标签,在Svelte中你能够间接写本身的html。

款式主动在Svelte中限制范畴, 那是有利于维护的一个好点，那能够制止CSS的一些副感化。每个组件的款式被限造在本组件内生效，不会影响到它的父组件和子组件。

更新数据的时候不要求计算属性。在Svelte中，它看起来更像是纯的javascript编程，你只需要存眷于编写js函数就能够了。

const reset = () => {firstName = "";lastName = "";}

仅需要单括号在Svelte中

//Svelte{fullName}//Vue{{fullName}}

需要留意是那个阐发仅针对上面指定的代码模板，那里不筹算对差别框架的异同做详细解释。要查看更多信息，能够参考网站 feel free to look online

简单的继承purec插件。下面是一个例子利用Svelete和Pure集成一个语法高亮

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

Try on the REPL

编译代码没有虚拟DOM。Svelte和Vue更大的差别是削减了app与阅读器之间的层数，那将带来更多的性能优化以及更快的使命处置速度。

主动更新。借助声明变量，Svelte能够主动更新你的数据，不需要期待更改反响在虚拟构造中，那将带来更好的用户体验。

Svelte也有它本身的缺点

当然，Svelte也有它本身的短板。好比一个相比照较小的社区，不外那是因为它仅发布与2019年。但跟着越来越多的开发人员承受它的长处以及用户友好的内容，那也将撑持Svelte社区将来的开展强大。Github上目前已经有按期的，解释友好的更新，能够很容易的拜候。

因而，在审查了那个阐发的成果后，我们决定迁徙到Svelte和Svelte Kit，立即SvelteKit在我们迁徙的过程中仍然处于活泼开发期。(看下图：)

Escape Benchmark about frontend stack

我们选择了那种办法来处置迁徙？

什么时候处置的迁徙：我们处置迁徙在8月份的时候，阿谁时候很少人利用APP。

时间跨度：花了两周时间迁徙从Vue迁徙所有文件到Svelte

几开发人员：两个前端开发人员破费整整两周开发时间，别的一个开发人员花了一整周的时间，因而一共是3个开发人员参与了那个迁徙。

工做流程：起首，我们利用Notion为我们团队的开发人员开通了拜候权限。接着，我们在[Storybook]创建了一个新的使命，最初，每个开发人员得到了一些需要利用Svelte重写的页面。

做为创业公司，它是容易重写的，因为我们没有数千个文件需要去重写，因而迁徙过程表示的十分敏捷。然而，它仍然是存在一些风险在我们起头去迁徙的时候，因为其时的SvelteKit仍是处于一个活泼开发形态。那招致我们在仅仅迁徙一个月之后就不能不做一个大的中断变动。但是，SvelteKit官方和他们常识渊博的团队供给给我们一个号令（npx svelte-migrate routes）和一个解释十分清晰的迁徙指南,它实的帮忙我们敏捷的适配了新的更新。

此外，在9月SvelteKit团队颁布发表改框架末于进入了候选发布阶段，那意味着它的不变性得到了包管！

文件&组件的组织体例

SvelteKit的“基于文件见的路由”给我们带来了许多。我们能够将页面拆分红子页面，以即可以重用尺度变量的名称，例如：“loading”，“submit”。etc…可能被回绝。此外，规划间接集成到联系关系的路由，因为在树内，即便文件组织增加它也是容易去拜候的。

我们得到了什么？

除了上述益处外，还有一些其他关键因素值得切磋：

得到提拔的梗流程的性能。一旦编译完成，我们就能够体味到应用的轻量级。那提拔了比拟其他框架的加载速度。那是因为其他框架在应用逻辑代码周边潜入了运行时。

更好的开发者体验。SvelteKit利用Vite模块，Vite是新一代的javascript构建东西，它操纵阅读器中ES模块的可用性和编译绑定带来了最新的javascript手艺带来的更佳开发者体验。

更快的代码施行。Svelte没有虚拟DOM，在停止页面更改时施行的层级少了一层。

启动并运行办事端衬着（SSR）。Svelte使代码愈加可读和容易维护，面向组件编码能够被组织在统一个文件中：逻辑（javascript）,构造（HTML），款式（CSS）。特殊之处时所有的元素都编译在统一个.svelte文件中。

固定的类型查抄。自从我们迁徙到Svelte，我们已经设法通过类型查抄处理了最后的问题。事实上，我们以前必需处置那种经常性通知，而今天不再出来了。不再呈现烦人的哨兵错误。（见下图）