Svelte调试模式js级别差异和细化后的体积差异详解
黎燃 人气:0js级别的差异
主要来自两个方面：hook系统（不考虑类）和ecma-ast差异hook系统。 钩子系统的api更多地用于纯函数组件注入状态和生命周期。在这两个方面，Svelte提供的解决方案是不同的。 由于预运行编译，Svelte编译器扫描所有与UI相关的状态并注入黑魔法，使得状态的使用与变量声明和赋值一样简单。 基本上，开发人员不需要太在意所谓的副作用；因此，一些钩子接口在Svelte框架上是冗余的。然而，考虑到大量的钩子接口，我们选择了内置的svelte钩子来简化转换过程中的转换逻辑。SVelte钩子是一组基于SVelte的钩子接口，通过对react钩子进行基准测试来实现，这些钩子在使用中基本相同。
<script>
import Nested from './Nested.svelte';
</script>
<style>
p {
color: purple;
font-family: 'Comic Sans MS', cursive;
font-size: 2em;
}
</style>
<p>These styles...</p>
<Nested/>
ecma ast差异
ecma ast difference babel提供的解析是基于estree的，但同时一些类型也在此基础上进行了改进。有关具体差异，请参阅此处的babel解析器[1]。细化的数据类型有助于我们进行转换推断，因此我们没有使用babel来提供estree插件，并且在转换之后，ast再次被平滑。 CSS转换比上述两部分的转换简单得多。React样式是标准css，Svelte样式也是标准css。但是，它将增加一定的编译能力。可以理解，它是标准css的超集，可以直接使用。然而，为了平滑jsx和Svelte html在自定义组件的类选择器中的差异，我们仍然在编译阶段进行了一些转换，这里不再展开。
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
细化后的体积差异
<script>
import { quintOut } from 'svelte/easing';
import { fade, draw, fly } from 'svelte/transition';
import { expand } from './custom-transitions.js';
import { inner, outer } from './shape.js';
let visible = true;
</script>
<style>
svg {
width: 100%;
height: 100%;
}
path {
fill: white;
opacity: 1;
}
label {
position: absolute;
top: 1em;
left: 1em;
}
.centered {
font-size: 20vw;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-family: 'Overpass';
letter-spacing: 0.12em;
color: #676778;
font-weight: 400;
}
.centered span {
will-change: filter;
}
</style>
{#if visible}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
<g out:fade="{{duration: 200}}" opacity=0.2>
<path
in:expand="{{duration: 400, delay: 1000, easing: quintOut}}"
style="stroke: #ff3e00; fill: #ff3e00; stroke-width: 50;"
d={outer}
/>
<path
in:draw="{{duration: 1000}}"
style="stroke:#ff3e00; stroke-width: 1.5"
d={inner}
/>
</g>
</svg>
<div class="centered" out:fly="{{y: -20, duration: 800}}">
{#each 'SVELTE' as char, i}
<span
in:fade="{{delay: 1000 + i * 150, duration: 800}}"
>{char}</span>
{/each}
</div>
{/if}
<label>
<input type="checkbox" bind:checked={visible}>
toggle me
</label>
<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="external nofollow" rel="stylesheet">
不可能100%准确地将运行时jsx编译成静态html，弱类型语言的变量跟踪不可靠，非本地逻辑控制语法不能在编译器中逐一枚举； 目前，在转换工作中仍然存在许多与编译相关的问题，但这些问题可以通过一些插件来补充并逐步改进。大型项目包装量的现状不容乐观。 Svelte可以通过预运行编译按需打包整个框架来有效地减少包容量，但编译产品本身没有优势。页面的UI交互越复杂，编译产品就越大。 此外，对框架的依赖程度越高，整体包装量的优势就会消失；此外，我们的转换器为编译增加了一定的复杂性，以平滑差异，因此仍有很大的空间来优化编译产品的数量。没有性能，没有前端。我们仍然缺乏关于性能的数据，但我们也从一些第三方文章中了解到，Svelte的整体性能并不是瓶颈。 理论上，通过编译实现数据驱动的DOM是简单而有效的。理论上，脱离虚拟DOM也会提高内存性能；但是，我们将单独查看性能。预运行编译的思想不仅适用于框架，也适用于组件，这也会带来很多好处。
调试模式
它可以与｛@debug…｝一起使用以替换控制台。log（…）。每当指定变量的值发生变化时，它都会记录这些变量的值。如果打开devtools，代码执行将在｛@debug…｝语句的位置暂停。 它接受单个变量名：
<script>
let user = {
firstname: 'Ada',
lastname: 'Lovelace'
};
</script>
{@debug user}
<h1>Hello {user.firstname}!</h1>
on:事件名
可以使用的修改器有： PreventDefault：调用事件。preventDefault（）在程序运行之前 StopPropagation：调用事件StopProparation（）以防止事件到达下一个标记 被动：提高了触摸/滚轮事件的滚动性能（Svelte将在适当的情况下自动添加） capture：表示其程序是在捕获阶段触发的，而不是通过冒泡 一次：程序运行一次后删除自身 可以连接修饰符，例如：单击|once|capture={…}。 如果未为使用的on:命令事件指定特定值，则意味着组件将负责转发事件，这意味着组件的用户可以监听事件。
<form on:submit|preventDefault={handleSubmit}>
</form>
svelte:options
<svelte:options>标记为组件提供编译器选项。有关详细信息，请参阅。选项包括： Immutable={true}-从不使用变量数据，因此编译器可以很容易地检查等式以确定值是否已更改。 不可变=｛false｝-默认选项。Svelte在处理可变对象值更改时趋于保守。 Accessors＝｛true｝-向组件的属性添加getter和setter。 访问器=｛false｝-默认值。 命名空间=“…”-让组件使用命名空间。最常见的是“svg”。 Tag=“…”-将此组件编译为自定义标记时使用的名称。
<svelte:options tag="my-custom-element"/>
此onMount函数用作回调，在组件安装到DOM后立即执行。它必须在组件初始化期间调用（但不一定在组件内部；可以从外部模块调用）。 OnMount不在内部运行。
<script>
import { onMount } from 'svelte';
onMount(() => {
const interval = setInterval(() => {
console.log('beep');
}, 1000);
return () => clearInterval(interval);
});
</script>
setContext
使用指定的键将任何上下文对象与当前组件相关联。然后，通过getContext函数将上下文应用于组件的子级（包括带有槽的内容）。与生命周期函数一样，它必须在组件初始化期间调用。
<script>
import { setContext } from 'svelte';
setContext('answer', 42);
</script>加载全部内容