背景
最近突然火起来的Svelte，在GitHub上已经有43k starts，相比angular.js 60k 和 Angular 70k差距不大，假以时日没准就变成四大框架（也许）
介绍
搜了一下，有英文网站，也有中文网站，看看点进去中文网站看了下
www.sveltejs.cn/ 中文网（未完成）
好家伙，暂时除了首页和教程，里面文章和文档都是英文的。不过这问题不大
1.那就先看了下教程，和三大框架写法大同小异，也是state，computed等类似概念。
2.写法比较自由（难约束），script，style，html可以穿插混着写。
3.注意到一点，https://www.sveltejs.cn/tutorial/updating-arrays-and-objects，这里讲到对数组和对象的修改和vue有相似的缺点，通常的push，splice等方法不会触发更新，对象更新属性在初始化时候就必须有该属性，新增属性不会触发更新。在这一点落后于vue3，我觉得会是比较差的开发体验。
4.组件接受props写法，觉得有点反人类？？？
<script>
export let answer;
</script>
5.条件渲染和循环等逻辑写法都是用{#xx}{/xx}包裹的写法，跟jsx也差不多，循环写法跟vue比较相似，只是看着真的很不习惯（用花括号当标签）
{#if x > 10}
<p>{x} is greater than 10</p>
{:else if 5 > x}
<p>{x} is less than 5</p>
{:else}
<p>{x} is between 5 and 10</p>
{/if}
支持awiat
{#await promise}
<p>...waiting</p>
{:then number}
<p>The number is {number}</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
看似挺方便，但我觉得如果逻辑复杂点还是需要回到js写法才清晰，还是if-else靠谱
6.事件差不多，on:event={eventHandler}
7.双绑写法，bind:value={}
8.nextTrick写法，效果相同，等所有变化更新到dom上后结束
// set some state
await tick();
// continue other things
9.自带状态管理工具
import { writable } from 'svelte/store';
export const count = writable(0);
类reducer
import { count } from './stores.js';
function increment() {
count.update(n => n + 1);
}
function reset() {
count.set(0);
}
读取状态，另外当前文件声明状态，然后监听该store新值并修改状态
import { count } from './stores.js';
let count_value;
const unsubscribe = count.subscribe(value => {
count_value = value;
});
销毁组件时候记得取消监听
onDestroy(unsubscribe);
或者html中用美元符号替代监听
<h1>The count is {$count}</h1>
。。。教程有点长，就不看完了
看看他解决的什么问题，这是官网首页的特点介绍
1.less code，没差多少，可读性有待商榷，pass
2.no vitrual dom，看了一下分析，主要支出diff过程消耗性能，如果想直接更新节点，就得内存里保存节点变量，也就是空间换时间。网上找了份编译后代码，像这个update调用了text，那text就不会被回收。我觉得提高了开发难度，换来的性能提升十分有限，增加开发（加班）时间。
// 模板代码（编译前）
<a>{{ msg }}</a>
// 运行代码（编译后）
function renderMainFragment ( root, component, target ) {
var a = document.createElement( 'a' );
var text = document.createTextNode( root.msg );
a.appendChild( text );
target.appendChild( a )
return {
update: function ( changed, root ) {
text.data = root.msg;
},
teardown: function ( detach ) {
if ( detach ) a.parentNode.removeChild( a );
}
};
}
我在一些评论区看到一位老哥讲到，未来如果解决了dom性能差的问题，虚拟dom就没有意义，我觉得很有道理，那这框架就是很好的选择了。
总结下，个人看法，有不合适地方欢迎指出
svelte的bundle.js比较小，刚开始我还认为svelte是很棒的渐进式框架。但是据说这是在项目比较小的时候才是，随着组件增多，模板代码也会越来越多（不知道版本有没有优化这个问题），这时候运行时代码就不一定比vue和react那些小了。
缺点我也不好说，因为不了解，这可能就是一个缺点吧哈哈哈，Svelte挺难的。
但是这个框架社区肯定不如vue和react，在国内热度甚至不如angular，踩到坑基本只能靠自己了。
最后摩拜一下尤大关于Svelte的看法，我是最后才看到这个帖子的里面还有个淘宝大佬的回答，突然感觉我讲的都是废话哈哈哈。由此看来Svelte真的很适用了小型项目，打包体积应该也是要比传统框架要小很多。
如何看待 svelte 这个前端框架？ - 尤雨溪的回答 - 知乎 www.zhihu.com/question/53…
能得到这么多前端人的关注，新老前端人也能看懂直接使用，特别的编译方式和没有虚拟dom的状态更新方式都是有优点的，所以Svelte也是一个非常优秀的框架，未来可期
