当前位置: 首页 > Web前端 > vue.js

这会不会是制约Svelte发展的最大因素

时间:2023-03-31 22:58:48 vue.js

大家好,我是Kason。多年来,前端框架一直在螺旋式发展。具体来说,很多主流的前端框架采用的技术其实很早就发明了。例如,在10年的时间里,Knockout开创了细粒度更新。新框架的出现一般遵循:新思想+现有技术的结合近两年,最流行的思想是Svelte带来的重新编译的概念。这也让他成为StackOverflow21年开发者报告中最受欢迎的框架。然而,开源世界和工业世界可能会出现两种情况:开发者说“哦,这个框架不错”,但是在写项目的时候,本体却很老老实实的选择了React。这也不能怪开发商。毕竟,生态是前端框架最重要的部分。本文想谈的是一个很可能制约Svelte生态发展的因素。从VUE说起,VUE3在技术选型的时候,有一个考虑点:是否去掉虚拟DOM,而虚拟DOM在拥抱重编译时的作用是找到交互引起的UI变化部分。但是,VUE3采用细粒度更新。理论上只要粒度够细,根本不需要虚拟DOM。通常,依赖于虚拟DOM的框架,虚拟DOM会占据一半以上的运行时工作量(如React,VUE)。如果能够去除虚拟DOM,可以带来以下好处:封装后的框架代码体积减小,运行时交互导致UI更新过程更短。不过VUE3最终还是保留了虚拟DOM。一个重要的原因是虚拟DOM可以弥补。模板语言的局限性虚拟DOM的优势比如当你需要在VUE中实现布局组件时:

1
2
33
44
预期的效果是:Layout中嵌套的结构有不同的缩进。输出的HTML如下:
1
2
33
44
这个需要使用slot特征。但是注意这部分,需要根据组件传入的levelprop动态变化://...例如:level=1对应于class="layout--1"。单纯用模板语法,是没法描述这个特性的。这时候就需要手写render函数了。因此,为了编写复杂的组件,VUE为开发者开辟了两条路,模板语法和手写render函数。之所以有两条路径,是因为两条路径最终都通向虚拟DOM。前端框架生态中很重要的一环就是组件库的丰富性。为有用的组件库更改框架是很常见的。因此,为了降低开发者编写复杂组件的成本,VUE保留了虚拟DOM。Svelte永远关上了门作为和VUE一样使用模板语法的框架,Svelte选择了重新编译的道路。这意味着他永远抛弃了虚拟DOM,也抛弃了虚拟DOM带来的灵活性。在讨论Render函数的PR中,官方明确表示:Svelte永远不会考虑render函数。由于render函数(以及其背后的虚拟DOM)被废弃,编写复杂组件时唯一的出路是:提供越来越多的ComplexAPI来应对复杂的场景例如:对于slot特性,Svelte提供了4个API:\\$$slots\反观React,因为极其灵活,所以根本没有对应的API。我们可以大胆推测编写复杂组件的成本:React