12

Svelte 入门第一课

 3 years ago
source link: https://segmentfault.com/a/1190000040123329
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.
neoserver,ios ssh client

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK