开箱Svelte

toc

• Svelte基础
  • 模版语法
    • if
    • 循环语法each
    • 异步加载await
    • 元素指令
  • 神奇的符号 $
  • Svelte 生命周期
  • Svelte dispatch, Context
• Svelte store使用
  • writable
  • readable
  • derived
• Svelte的一点点不爽
• 总结

Svelte基础

Svelte基本使用方式上和Vue很相似，组件的HTML，CSS，JS写在一个.svelte的文件中。

代码语言：javascript复制

<script>
	let count = 0;

	function handleClick() {
	  count  = 1;
	}
</script>

<style>
	button {
	  background: #ff3e00;
	  color: white;
	  border: none;
	  padding: 8px 12px;
	  border-radius: 2px;
	}
</style>

<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

模版语法

if

代码语言：javascript复制

{#if porridge.temperature > 100}
	<p>too hot!</p>
{:else if 80 > porridge.temperature}
	<p>too cold!</p>
{:else}
	<p>just right!</p>
{/if}

循环语法each

代码语言：javascript复制

{#each items as item, i}
	<li>{i   1}: {item.name} x {item.qty}</li>
{/each}

异步加载await

甚至可以直接在模版中使用promise

代码语言：javascript复制

{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled -->
	<p>The value is {value}</p>
{:catch error}
	<!-- promise was rejected -->
	<p>Something went wrong: {error.message}</p>
{/await}

元素指令

Svelte中的元素指令可以让你很方便的操控元素。

• 事件监听on:eventname： on:eventname|modifiers={handler}
• 属性绑定bind:property： bind:property={variable}
  • 甚至可以只读的绑定clientWidth,clientHeight,offsetWidth,offsetWidth
• 组合input(radio, checkbox)属性绑定bind:group={variable}
• 获取DOM节点或组件的实例，bind:this ：bind:this={dom_node}
• class绑定，div class="{active ? 'active' : ''}">...</div>,<div class:active class:inactive={!active} class:isAdmin>...</div>
• 以及常用的slot
• ……

总体来说来svelte基础语法实在易用，上手也很容易。更多可以查看Svelte API文档。

神奇的符号 $

Svelte巧妙的使用了一个js中没什么用的$符号，来表达响应。

代码语言：javascript复制

let a = 0;
$: b = a   5;

变量b的值会随着a的变化而变化。甚至可以包裹成更复杂代码快。

代码语言：javascript复制

let a = 1;
let b = 2;
$: {
	if (a b > 10){
		// do something
	}
}

Svelte 生命周期

web框架，特别是组件化的框架，自然会有生命周期，Svelte也不例外：

• onMound： onMount(callback: () => () => void)
• beforeUpdate: beforeUpdate(callback: () => void)
• afterUpdate: afterUpdate(callback: () => void)
• onDestroy: onDestroy(callback: () => void)

行为和大家熟知Vue，React的基本一样。

Svelte dispatch, Context

Svelte组件的组合，以及组件的通信和Vue的非常的类似， 属性自上而下通过$$props传递，子组件向上dispath事件。

代码语言：javascript复制

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();
</script>

<button on:click="{() => dispatch('notify', 'detail value')}">Fire Event</button>

这样自然也有跨组件通信的问题，Svelte则是提供了context， 不过和Svelte store 结合，使用也挺容易。

代码语言：javascript复制

import { writable } from "svelte/store";
const nameStore = writable("name");

setContext("name", nameStore);

function changeName() {
	nameStore.set("name2");
}

代码语言：javascript复制

<div>
	<p>{$name}</p>
</div>


<script>
import { getContext } from "svelte";
const name = getContext("name");
</script>

---

so far so good, 下面进入Svelte真正有趣的地方