Svelte 入门第一课

Posted 2021-09-10 木子喵

Svelte 是什么？

• Svelte 跟 vue 和 react一样，是一个数据驱动组件框架。但是也有很大的不同，它是一个运行时框架，无需引入框架本身，同时也没用到虚拟 DOM（运行时框架特性决定了这个框架跟虚拟 DOM 无缘）。
• Svelte 的核心思想在于『通过静态编译减少框架运行时的代码量』
• 当前的框架无论是 React Angular 还是 Vue，不管你怎么编译，使用的时候必然需要『引入』框架本身，也就是所谓的运行时 (runtime)。但是用 Svelte 就不一样，一个 Svelte 组件编译了以后，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，你不需要再额外引入一个所谓的框架运行时！

• Svelte 的特性

• Svelte 的编译风格是将模板编译为命令式 (imperative) 的原生 DOM 操作
• 跟基于 Virtual DOM 的框架相比，这样的输出不需要 Virtual DOM 的 diff/patch 操作，自然可以省去大量代码，同时，性能上也和 vanilla JS 相差无几（仅就这个简单示例而言），内存占用更是极佳。这个思路其实并不是它首创，之前有一个性能爆表的模板引擎 Monkberry.js 也是这样实现的，ng2 的模板编译其实也跟这个很类似（但是中间加了一层渲染抽象层）。
• 就是用来编译可独立分发的 Web Components

svelet 目前能帮我们做什么？

• 1.兼容原生html用法。可以剥离单个component .
• 2.响应式也很自然

如何应用svelet

npx degit sveltejs/template my-svelte-demo
cd my-svelte-demo
npm install
npm run dev

如何应用svelet 特性标签

• @html text2html
• $: 这个是watch

参考文献

• 什么是 Svelte
• Svelte 中文官网