这些前端新技术你很难再忽视了 —— Svelte

·  阅读 3401
这些前端新技术你很难再忽视了 —— Svelte

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第9天,点击查看活动详情


新系列《这些前端新技术你很难再忽视了》,包括:SolidJS、Svelte、Tauri、Bun、Schema等。每一个都引领前端技术演变趋势,很有必要了解。

咱们将采用 5W1H 分析法,即 What(何事)、Why(何因)、Where(何地)、When(何时)、何人(Who)、How(何法)6 个维度来解析这些“新玩意儿”。

本篇带来 —— Svelte,或许很多工友已经很熟悉了,还不认识的工友赶快来学、卷起来~

闲话少说,冲了~

  • 点赞收藏关注,今晚一夜暴富 👍👍👍

🤔What

什么是 Svelte?

答:Svelte 是一个构建 web 应用程序的工具。

Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似,关键区别有 3 点:

  1. 编译时间不一样;
  2. 无虚拟 Dom;
  3. 响应式原理不一样;

image.png

哈~ React、Vue、Svelte、SolidJS 到底是什么关系?

答:用 LOL 英雄来打个比方吧~

Vue 像 LOL 中的 寒冰射手·艾希,上手简单明快,小白萌新只会平A的也可以上手,要玩的好那必须要有一定的意识,上限是有天花板的,而且最好是带上一个辅助配合—— Vuex,Vue-router等。

Svelte 像 LOL 中的 暗夜猎手·薇恩,虽然身板也很脆弱,但异常灵活 ,能有很大的秀的空间、门槛偏高,适合高手。

React 像 LOL 中的 皮城女警·凯瑟琳,看起来好玩,其实对操作者的要求挺高的,会玩的能玩出天际,不会的基本就是不会,萌新想要玩的动,需要比较多时间的练习;用起来还比较吃队友(社区插件)

SolidJS 像 LOL 的 皮城执法官·蔚,和皮城女警是 couple,还有个说法:“目前 React、Vue、Svelte 没人能接住 SolidJS 这一拳”,蔚就是拳师,“先打一拳,再把问题问个遍。”

image.png

可以粗暴简单这样记忆,Svelte 和 Vue 是一对,SolidJS 和 React 是一对。书写风格 Svelte 和 Vue 很像;而 SolidJS 和 React 很像;

🧐Why

总在说预编译,为什么要预编译?

答:Svelte 的核心思想在于 通过静态编译减少框架运行时的代码量。打包出来的项目就几乎是原生JS代码,不会再像 React、Vue 那样在代码运行的时候再执行 虚拟 dom 那些。

那咱好不容易学会了虚拟 Dom,现在又跟我说取消虚拟 Dom,为什么?

答:Svelte 的编译策略决定了它跟 Virtual DOM 绝缘。它将 HTML 直接编译成 JavaScript;

举个栗子:

// 编译前
<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 将<a>{{ msg }}</a>这个模板片段 AOT 编译成很精简的一段 JavaScript 模块,这个模块主要的操作有四个部分:create、mount、update、unmount。create 顾名思义就是创建 HTML 片段,把模板中的各个用 HTML 元素用 Vanilla API 创建出来,然后 mount 就可以将这个片段添加到页面的 DOM 中。比较重要的就是 update,它是将新数据绑定到视图的操作。

如果用 React.js 来实现的话,先渲染成 element 然后与 V-Dom 做 diff 操作,然后 patch,bla bla bla,中间还要经过几个 event loop,是不是很多余?

所以这就是 Svelte 的精髓,用最少的操作(代码、CPU Cycle)去实现我们的目标,所以它生成的代码又小运行起来又快。

🤫Where

官方文档地址?还是看文档更准确。

答:www.sveltejs.cn/tutorial/ba…

image.png

左边是文档解释、右边是在线运行的代码,学起来真方便!!

🙄When

Svelte 什么时候诞生的?

答:2016年。

那回想这几个框架的诞生时间线先后是:

  • Angular(2009 年)
  • React (2013 年 3 月)
  • Vue (2014 年 2 月)
  • Svelte(2016 年)
  • SolidJS(2018 年)

再分享几个有意思的数据:Svelte 在 2020 前端框架满意度排行榜中超越了react,跃升到了第一位,但在 2021 又被 solidJS 给超越了。

image.png

在开发者兴趣度方面,连续 3 年 Svelte 位列第一。

image.png

😄Who

Svelte 作者 Rich Harris 是个什么级别的人物?

答:Rich Harris,也就是 Ractive, Rollup 和 Buble 的作者,堪称前端界的轮子哥。

image.png

😁How

怎么使用?

答:来看一段 Svelte 代码片段,感受感受~

<!-- App.svelte -->

<script lang="ts">
import { onMount } from 'svelte';

// 1:变量、双向绑定、事件处理
let name = 'world';
const onClick = () => name = 'Rex';

// 2:`if` 块、Watch
let x = 0;
const incX = () => x++;
// 这就像 Vue 中的 `watch` 功能
// 语法很奇怪,但是是合法的
$: doubleX = x * 2;

// 3:`each` 块
let characters = [
    { name: 'Aroma White' },
    { name: 'Neko Asakura' },
    { name: 'ROBO Head' }
];
const append = (name: string) => {
    if (!characters.find(t => t.name === name)) {
        characters = [...characters, { name }];
    }
};

// 生命周期
onMount(async () => {
    const res = await fetch(`/photos`);
    const photos = await res.json();
    console.log(photos);
});
</script>

<main>
    <section class="my-section-1">
        <h1>Hello {name}!</h1>
        <input bind:value={name}>
        <button on:click={onClick}>I'm Rex</button>
    </section>
    <section class="my-section-2">
        {#if x > 10}
            <p>{x} is greater than 10</p>
        {:else if x < 5}
            <p>{x} is less than 5</p>
        {:else}
            <p>{x} is between 5 and 10</p>
        {/if}
        <p>Double x is {doubleX}</p>
        <button on:click={incX}>x++</button>
    </section>
    <section class="my-section-3">
        <button on:click={() => append('Simon Jackson')}>
            Add Simon
        </button>
        <ul>
            {#each characters as c, i}
                <li>{i + 1}: {c.name}</li>
            {/each}
        </ul>
    </section>
</main>

<style>
main {
    font-size: 18px;
}
</style>
复制代码

每个 .svelte 文件就是一个组件,并且也完整支持 Props、Context、Slot;

有完整的生命周期:onMountonDestroybeforeUpdateafterUpdate


小结:先学 Svelte ,再学 SolidJS,紧跟趋势,太卷了吧?!

OK,以上便是本篇分享。点赞关注评论,为好文助力👍

我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,安东尼陪你一起度过漫长编程岁月 🌏

分类:
前端
收藏成功!
已添加到「」, 点击更改