Svelte调试模式js级别差异和细化后的体积差异详解

目录

• js级别的差异
• ecma ast差异
• 细化后的体积差异
• 调试模式
• on:事件名
• svelte:options
• setContext

js级别的差异

主要来自两个方面：hook系统（不考虑类）和ecma-ast差异hook系统。 钩子系统的api更多地用于纯函数组件注入状态和生命周期。在这两个方面，Svelte提供的解决方案是不同的。 由于预运行编译，Svelte编译器扫描所有与UI相关的状态并注入黑魔法，使得状态的使用与变量声明和赋值一样简单。 基本上，开发人员不需要太在意所谓的副作用；因此，一些钩子接口在Svelte框架上是冗余的。然而，考虑到大量的钩子接口，我们选择了内置的svelte钩子来简化转换过程中的转换逻辑。SVelte钩子是一组基于SVelte的钩子接口，通过对react钩子进行基准测试来实现，这些钩子在使用中基本相同。

These styles...

ecma ast差异

ecma ast difference babel提供的解析是基于estree的，但同时一些类型也在此基础上进行了改进。有关具体差异，请参阅此处的babel解析器[1]。细化的数据类型有助于我们进行转换推断，因此我们没有使用babel来提供estree插件，并且在转换之后，ast再次被平滑。 CSS转换比上述两部分的转换简单得多。React样式是标准css，Svelte样式也是标准css。但是，它将增加一定的编译能力。可以理解，它是标准css的超集，可以直接使用。然而，为了平滑jsx和Svelte html在自定义组件的类选择器中的差异，我们仍然在编译阶段进行了一些转换，这里不再展开。

	Clicked {count} {count === 1 ? 'time' : 'times'}

细化后的体积差异

{#if visible}
	
	

		{#each 'SVELTE' as char, i}
			{char}
		{/each}
	
{/if}

	
	toggle me

不可能100%准确地将运行时jsx编译成静态html，弱类型语言的变量跟踪不可靠，非本地逻辑控制语法不能在编译器中逐一枚举； 目前，在转换工作中仍然存在许多与编译相关的问题，但这些问题可以通过一些插件来补充并逐步改进。大型项目包装量的现状不容乐观。 Svelte可以通过预运行编译按需打包整个框架来有效地减少包容量，但编译产品本身没有优势。页面的UI交互越复杂，编译产品就越大。 此外，对框架的依赖程度越高，整体包装量的优势就会消失；此外，我们的转换器为编译增加了一定的复杂性，以平滑差异，因此仍有很大的空间来优化编译产品的数量。没有性能，没有前端。我们仍然缺乏关于性能的数据，但我们也从一些第三方文章中了解到，Svelte的整体性能并不是瓶颈。 理论上，通过编译实现数据驱动的DOM是简单而有效的。理论上，脱离虚拟DOM也会提高内存性能；但是，我们将单独查看性能。预运行编译的思想不仅适用于框架，也适用于组件，这也会带来很多好处。

调试模式

它可以与｛@debug…｝一起使用以替换控制台。log（…）。每当指定变量的值发生变化时，它都会记录这些变量的值。如果打开devtools，代码执行将在｛@debug…｝语句的位置暂停。 它接受单个变量名：

{@debug user}
Hello {user.firstname}!

on:事件名

可以使用的修改器有： PreventDefault：调用事件。preventDefault（）在程序运行之前 StopPropagation：调用事件StopProparation（）以防止事件到达下一个标记 被动：提高了触摸/滚轮事件的滚动性能（Svelte将在适当的情况下自动添加） capture：表示其程序是在捕获阶段触发的，而不是通过冒泡 一次：程序运行一次后删除自身 可以连接修饰符，例如：单击|once|capture={…}。 如果未为使用的on:命令事件指定特定值，则意味着组件将负责转发事件，这意味着组件的用户可以监听事件。

svelte:options

标记为组件提供编译器选项。有关详细信息，请参阅。选项包括： Immutable={true}-从不使用变量数据，因此编译器可以很容易地检查等式以确定值是否已更改。 不可变=｛false｝-默认选项。Svelte在处理可变对象值更改时趋于保守。 Accessors＝｛true｝-向组件的属性添加getter和setter。 访问器=｛false｝-默认值。 命名空间=“…”-让组件使用命名空间。最常见的是“svg”。 Tag=“…”-将此组件编译为自定义标记时使用的名称。

此onMount函数用作回调，在组件安装到DOM后立即执行。它必须在组件初始化期间调用（但不一定在组件内部；可以从外部模块调用）。 OnMount不在内部运行。

setContext

使用指定的键将任何上下文对象与当前组件相关联。然后，通过getContext函数将上下文应用于组件的子级（包括带有槽的内容）。与生命周期函数一样，它必须在组件初始化期间调用。

以上就是Svelte调试模式js级别差异和细化后的体积差异详解的详细内容，更多关于Svelte调试模式js级别差异的资料请关注脚本之家其它相关文章！