开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7天，点击查看活动详情

更新数组和对象

还记得svelte是怎么创建响应式数据的么?直接在script中赋值,那么像一些数组方法(push、pop)等方法肯定就不太适用了,但是同时svelte也给了我们解决方案. 使用扩展运算符来解决:

function addNumber() {
	numbers = [...numbers, numbers.length + 1];
}

甚至你可以使用暴力来解决,多一步操作:

function addNumber() {
	numbers.push(numbers.length + 1);
	numbers = numbers;
}

事件修饰符

Vue带给我们许多的事件修饰符,使得我们在开发过程中事半功倍.而svelte也给我们带来许多的修饰符:像once: 它的作用在于这个事件出现只执行一次. 更多的修饰符如下(来自于中文文档):

修饰符	作用
preventDefault	调用event.preventDefault() ，在运行处理程序之前调用。
stopPropagation	调用 event.stopPropagation(), 防止事件影响到下一个元素。
passive	-  优化了对 touch/wheel 事件的滚动表现(Svelte 会在合适的地方自动添加滚动条)。
capture	在 capture 阶段而不是bubbling 阶段触发事件处理程序
once	- 运行一次事件处理程序后将其删除。
self	- 仅当 event.target 是其本身时才执行。

你可以将修饰符组合在一起使用，例如：on:click|once|capture={...}。

事件转发

组件的事件不会向上冒泡,因此我们需要在监听某个深层的组件事件,我们需要在中间组件上进行转发. 如:

<script>
	import Inner from './Inner.svelte';
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function forward(event) {
		dispatch('message', event.detail);
	}
</script>

<Inner on:message={forward}/>

还有一种更加简洁的写法(使用on关键字):

<script>
	import Inner from './Inner.svelte';
</script>

<Inner on:message/>

css过渡

svelte内置了tansition模块,比如:

<p
	transition:fly="{{ y: 200, duration: 2000 }}"
	on:introstart="{() => status = 'intro started'}"
	on:outrostart="{() => status = 'outro started'}"
	on:introend="{() => status = 'intro ended'}"
	on:outroend="{() => status = 'outro ended'}"
>
	Flies in and out
</p>

同时过监听过渡效果中触发的事件. 我们可以使用crossfade 函数来实现延时过渡，该函数创建一对称名为 send 和receive. 当一个标签被 'sent'时， 它会寻找一个被'received'的标签，并赋予一个过渡效果，反之同理。如果没有对应的接收方，过渡效果将会设置为fallback 。