初识Svelte

背景

最近突然火起来的Svelte，在GitHub上已经有43k starts，相比angular.js 60k 和 Angular 70k差距不大，假以时日没准就变成四大框架（也许）

介绍

搜了一下，有英文网站，也有中文网站，看看点进去中文网站看了下

svelte.dev/

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就不会被回收。再说diff真的有这么大的开销吗，我觉得挺高了开发难度，换来的性能提升十分有限，增加开发（加班）时间

// 模板代码（编译前）
<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 );
		}
	};
}

总结下，个人看法，有不合适地方欢迎指出

svelte的bundle.js比较小，也许是一个更好的渐进式框架的选择，如果开发团队折腾得起的话，在性能方面应该有所提升，最好从一些小的项目上开始尝试

缺点我也不好说，因为不了解，这可能就是一个缺点吧哈哈哈，Svelte挺难的。

但是这个框架社区肯定不如vue和react，在国内热度甚至不如angular，踩到坑基本只能靠自己了。

最后摩拜一下尤大关于Svelte的看法，我是最后才看到这个帖子的里面还有个淘宝大佬的回答，突然感觉我讲的都是废话哈哈哈。由此看来Svelte真的很适用了小型项目，打包体积应该也是要比传统框架要小很多

如何看待 svelte 这个前端框架？ - 尤雨溪的回答 - 知乎 www.zhihu.com/question/53…