当前位置: 首页 > news >正文

相比Vue和React,Svelte可能更适合你

什么是Svelte?

简介

Svelte 的作者 Rich Harris 将他的创作描述为“没有框架的框架”。

Svelte 基于用于在构建阶段编译组件的工具(本质上,Svelte.js 本身就是一个编译器),允许仅加载在页面上显示应用程序所需的内容——尽可能小的、“可消化的” JavaScript 代码。

这意味着没有虚拟 DOM,没有框架之上的框架,也没有运行时的框架。这是 Svelte 和 Vue 之间的主要区别,也是 Svelte 与 React 与 Angular 与 Vue 之战的主要争论点。

Svelte 是一个构建 web 应用程序的工具。
Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似,都怀揣着一颗让构建交互式用户界面变得更容易的心。
但是有一个关键的区别:Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用,而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本,并且在应用程序首次加载时没有额外损失。
你可以使用 Svelte 构建整个应用程序,也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包(package)交付到任何地方,并且不会有传统框架所带来的额外开销。


Svelte 的用例

在 Svelte.js 与 React 与 Vue 中,最关键的论点之一是使用。Svelte 最常见的用例包括:

  • 单页应用程序。
  • 适用于低功耗设备的应用程序。使用 Svelte 创建的应用程序代码更少,这实际上意味着要下载的数据更少,这对于低功耗设备来说是完美的。
  • 具有交互式可视化的应用程序。没有运行时的框架要方便得多,因为它可以让视觉效果更具响应性。

Svelte 的优点

随着语言的重大转变,在 Svelte.js 与 Vue 的战斗中,Svelte 看起来更有利,然而,在 React、Svelte 和 Vue 的比较中,它们都相对容易使用。你可以写在.html文件或.svelte文件中,在代码中也不需要使用 “this”。

但请注意:语法更简单,但需要注意这是一把双刃剑。

无需虚拟 DOM ,Svelte 的主要卖点以及 Svelte 和 Vue 之间的主要区别在于:减少了浏览器和应用程序之间的距离,从而使工作更加优化和快速。

根据测试,在 Svelte 与 React 与 Vue 的对决中,Svelte 比其他框架快约 30%。它还反映了 Svelte 与 Vue 的性能。
在声明变量的帮助下,Svelte 可以自动更新数据。这样,不必等待更改反映在您的虚拟结构中,从而获得更好的用户体验。


Svelte 的缺点

但是,Svelte 存在一些重大缺陷,可能会对开发人员的体验产生负面影响。

  • 没有更强大的的支持。虽然 Vue.js 和 Angular 得到了 Google 的支持,而 React 得到了 Facebook 的支持——这两个都是强大的 IT 巨头,但 Svelte 到目前为止还没有任何主要的支持。当然,这是一个非常年轻的框架,将来可能会得到支持,但如果你现在决定使用它,请做好准备。

  • 小社区。Svelte 现在不是很流行。例如像找UI库这样简单的事情可能会很耗时。并且在没有 UI Kits 的情况下使用 JS 比看起来要困难得多。

  • 路由问题。如果没有普通路由器,甚至无法创建单页 Web 应用程序。目前,Svelte 的选择并不多,主要是在两个选项之间进行选择,这两个选项都不好。可以链接您的路由器,但需要更多的时间和精力。

  • 还不支持跨平台应用程序。必须在 ReactNative 中完全重写移动应用程序或使用硬连线的 NativeScript,但要手动完成。


Svelte组件

在 Svelte 中,应用程序由一个或多个 组件(components) 构成。组件是一个可重用的、自包含的代码块,它将 HTML、CSS 和 JavaScript 代码封装在一起并写入 .svelte 后缀名的文件中。



我为什么选择Svelte?

趋势

首先我们来看一组数据:
在这里插入图片描述
这组数据来自:state-of-frontend
他们调查了3703名开发者,来自125个国家,19位专家。

数据表明有将近一半的开发者在将来想学习Svelte框架,大势所趋,那么肯定有其原因,所以我们需要学起来。


无DOM和语法,引人入胜

在某些场景下虚拟DOM固然快,但我很疑惑为什么会经常出现:“虚拟DOM比真实DOM快” 的一刀切言论,难道不看使用场景的吗?

Svelte 主要是一个编译器。它能够一步生成并同时优化代码,从而提高性能。这会降低运行时开销,并且用户可以享受平滑的过渡和异常快速的渲染。
另一个减少运行时间的独特来源是虚拟 DOM。由于不需要虚拟 DOM 优化和并发模块,性能得到了简化。Svelte 通过更改组件本身来负责在没有中间人(例如 API)的情况下更新 DOM。

其次我们来看一段代码

<script>
	let user = { loggedIn: false };

	function toggle() {
		user.loggedIn = !user.loggedIn;
	}
</script>

<button on:click={toggle}>
	Log out
</button>

<button on:click={toggle}>
	Log in
</button>

习惯了天花乱坠Hooks的之后,Svelte的语法震惊到我了,还能这么简洁?

需要提醒的是,Svelte 性能和语法固然出色,但并不是让你不加思索就跳船。



尝试

在使用Svelte的过程中发现,目前适配Svelte的UI框架确实少,所以我正在尝试将DouyinFE/semi-design中的Adapter部分实现于到Svelte框架中。欢迎star:svelte-semi-ui



相关文章:

  • 冯喜运:5.14黄金价格空头延续反弹空,原油走势分析实时操作
  • 10、Go Gin 连接Redis以及CookieSession
  • Llama3中文聊天项目全能资源库
  • 《intel开发手册卷3》读书笔记1
  • 【二叉树算法题记录】404. 左叶子之和
  • 二分判定+选插冒排序+归并快速堆希尔+计数排序
  • Vant Weapp
  • SRIO--IP讲解及环回测试
  • 无人机飞行控制系统技术,四旋翼无人机控制系统建模技术详解
  • CKA认证,开启您的云原生之旅!
  • xtu oj 1131 凹数
  • 备战蓝桥杯Day17 - 链表
  • HTTP/HTTPS/TCP原理
  • 基于TCP的socket API,让你拥有另一套自己的服务器~
  • 关于IO的探究:BIO、NIO、AIO(未完待续)
  • API接口名称(item_search - 按关键字搜索淘宝商品)[item_search,item_get,item_search_shop等]
  • 拥抱云原生,Java与Python基于gRPC通信
  • 【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件
  • 【C语言】-字符串函数和内存函数(下)
  • r语言使用rjags R2jags建立贝叶斯模型|附代码数据
  • wifi码小程序全面分析
  • 使用小程序实现图表(圆饼图、柱状图、折线图)
  • 自动驾驶如何面对恶劣天气问题?景联文科技提供相关数据标注服务
  • 微服务项目架构演变过程
  • 搭建线性网络对MNIST数据集进行训练、测试,并且预测图片
  • 【HTML+CSS】静态网页设计期末大作业——我的家乡无锡印象
  • @Cacheable和@CacheEvict的学习使用
  • 宝塔面板安装部署Vue项目,Vue项目从打包到上线
  • 《MLB棒球创造营》:走近棒球运动·迈阿密马林鱼队
  • 【设计模式】行为型模式-第 3 章第 3 讲【解释器模式】
  • 【云原生之Docker实战】使用Docker部署pdf2htmlEX文件转换工具
  • Observability:集群监控 (一) - Elastic Stack 8.x