Svelte从入门到精通

恭喜你，相信经过这段时间的刻苦学习，你又掌握了一门技艺，又在前端旅程上更进一步。 对于全篇的内容，我采用了螺旋前进式的方式进行讲解，让读者朋友们不会随着文章阅读的深入，渐渐觉得难度过大而力不从心。

尽管Svelte的生态环境和React、Vue这两大框架相比稍显得不够庞大，但对于基本的开发已经覆盖全面。为了展现其全面性，会继续从三大框架的各个方面进行对比。 对比 Svelte React Vue

特殊block 这是实现模块的最后一章，笔者会带大家编写如何实现一个简单的if逻辑判断。 首先我们需要在原来判断表达式的逻辑里，加上对特殊html标签的判断。 添加解析特殊标签的逻辑。

解析表达式 目前，我们在标签内的展示内容，都是静态文本。这一样，我们添加对诸如<div>{count}</div>形式内容的支持。 首先在parseFragment方法中

解析子节点 在前面的章节中，我们反复提到没有支持标签内子元素的展示，而导致我们在演示时只能干写标签而无内容，在本章中我们将完善这一功能。 首先我们要改造的是parseFragments： 将其改为接收

在上一章中，我们完成了script的解析，其主要逻辑都集中在parseScript中 标签 解析标签 在parseFragment方法内，添加parseElement的解析逻辑： ??是一个空值合并

我们继续完善上一章中的parse方法。我们从App.svelte读取到字符串内容后，传递进了compile方法中，继而传进到parse方法中。在parse方法内，我们定义一个parseFragment

我们在源码阶段已经初步了解了Svelte的整体运作流程，从这一章开始，笔者将和读者朋友们一起，自己动手实现一个简化版的Svelte，在实现完后，读者朋友们可以和源码篇一起阅读相辅相成，进一步夯实自己

本章笔者将演示Svelte从编译到运行的整体流程。 这里笔者使用的Node版本为18.15.0。 首先我们下载源码，然后把版本分支切换到4.2.12分支。 Svelte使用的是monorepo的管理

要了解Svelte的运行时逻辑，可以从它编译后的代码出发。我们在REPL编写一个简易的程序。 看下编译后的js代码： 我们理一下编译后的大体逻辑： 首先是建一个SvelteComponent类，该类由

经过了前两章的铺垫，我们正式开始对源码进行解读。到笔者目前写文章时，Svelte的最新版本是4.2.12。

我们在解读源码时，会遇到一行这样的代码： 如果没有接触过位运算的读者，可能会对这行代码犯迷糊，因此，笔者准备花一章的时间来和大家一起了解“位运算”。

在正式解读源码之前，笔者会和读者朋友们一起了解一些npm库的功能作用，每一个都和我们接下来的源码解读息息相关。在阅读完本章后，相信读者们在接下来的源码讲解中，不至于遇到一个功能库而一头雾水。

我们在本章对比一下三大框架的跨组件传值能力。 React function component 首先我们定义一个父组件，父组件内count变量用来测试在外层更改后，内层接收到的变量是否有更改

React 行内样式 在React中，行内样式需要以style={styleObj}的形式： 在样式对象内，之前在行内样式中使用-连接的属性需要转成使用驼峰的形式

ref主要用于获取组件实例或访问 DOM 节点,也可以用于组件间通信。 React React中使用ref的主要形式如下： 元素标签 如果我们把ref绑定到html标签上，可以直接获取到DOM节点。

React 在React中，我们可以灵活地操作数组类型的数据，如果要把数组数据以列表的形式展示到页面上，jsx允许我们正常地使用数组支持的方法，比如map、forEach等。

React if-else 在React中，条件判断在{}中执行，通过三元表达式的判断来显示内容。 && 除了三元表达式? : 外，还能使用二院表达式&&来判断。

计算属性 所谓“计算属性”，是指某些变量依赖于其他变量而更新，当其依赖的变量更新时，这些计算属性才会执行更新。比如设置一个area为计算属性，它依赖于width和height两个变量

React 默认slot 在父组件中，在使用子组件时，直接在子组件标签内填充内容： 在子组件中，通过props中的children属性来接收插槽内容。