开始之前

尽管市面上不同框架都有自己的特性，但不妨碍我们通过已有知识去类比着学习，因为使用不同框架实现同一个需求时，尽管语法、方法可能不同，但结果都是一致的。

例如，在 vue 中我们可以在控件上使用v-if、v-else控制渲染的条件分支，而在 React 的 jsx 中通过三元表达式实现，因此我们在初学时完全可以想当然的将这两种不同的方法划上等号，等熟悉后再慢慢理解它们的细节、差异、优劣。

本文将参照vue的基础知识体系去窥探svelte框架，帮助vue开发者快速上手svelte，这需要你具备vue 2、甚至vue 3最基本的开发能力。

单文件组件

首先来看它们各自的文件。vue 的单文件组件的文件名以 .vue 为后缀，svelte 的单文件组件文件名以 .svelte 为后缀。

以vue 3 setup基础模板来对比它们的基本结构：

/** App.vue */
<script setup>
	import { ref } from 'vue'
	
	const name = ref('kortin')
</script>

<template>
	<div>Hello World!</div>
	<span>{{ name }}</span>
</template>

<style lang="scss" scoped>
<style>

/** App.svelte */
<div>Hello World!</div>
<span>{ name }</span>

<script>
	let name = 'kortin'
</script>

<style>
<style>

svelte和vue的单文件组件基本结构很像，甚至比vue3 setup语法糖还要简洁

模板语法

插值

/** vue */
<p>{{ name }}</p>
<p>{{ one }} + {{ two }} = {{ one + two }}</p>

/** svelte */
<p>{ name }</p>
<p>{ one } + { two } = { one + two }</p>

vue 使用双花括号标识一个插值表达式，而svelte使用单花括号。同样地，它们都支持在内部加入JavaScript 表达式。