从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 <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...