记录一些常见的数学公式的markdwon语法
对于国内前端开发者来说,前端框架首选无疑是React和Vue、退而其次是Angular。从本章开始,我将和大家一起了解一个不同于React和Vue等以虚拟DOM为核心的框架,它在国外的关注程度一度超过了前端框架的龙头React,这个框架就是——Svelte。
工欲善其事,必先利其器。在学习了解Svelte之前,我们需要确保相关的开发环境已经搭建完毕。
数据是页面展示中最重要的一环。在React中,我们通过 `this.state`来对变量进行声明存储,亦或是通过 `useState`来操作;在Vue中,我们可以把数据放到 `data()`方法的返回值里,亦或者使用 `ref`、`reactive`来声明变量;而在Svelte中,我们则直接在script标签中正常声明,然后再在html标签里使用 `{}`来包裹变量。
在项目开发中,我们通常推崇组件式的开发。所谓组件式,即抽离一些通用的逻辑到一个文件中组装成一个组件,当页面有用到该功能时,直接调用组件即可。那组件除了内部维持自身的逻辑之外,还需要通过接受外部传进来的数据,来实现组件的动态性和灵活性。
每个组件从创建开始,到销毁结束这个过程,都有一个生命周期。在不同的生命周期阶段,组件对外提供一个方法,使调用组件的开发人员能够更灵活地在每个生命周期阶段对组件进行控制,这类方法便是生命钩子函数。
如果读者接触过Vue或者React,那么必然了解过像Vue的`computed`、`watch`和React的`useMemo`等用于监听某些变量发生更改后才重新计算出新的变量或执行某些方法的Api。在Svelte中,同样提供了类似的功能。
在程序语言中,当然不止数据的存储和更新,同样重要的还有如何更新和展示这些数据。本章中,笔者将与读者们一起了解如何通过条件判断来展示或隐藏页面内容,如何通过列表循环来展示数组内容。
一个最常见的场景便是UI组件中的Modal弹窗组件。弹窗的弹出隐藏是通用的,但是弹窗内的内容则是五花八门,完全由用户自己定义,而这种能够往组件内部插入自定义内容的模块,我们称之为“插槽”。
无论是在React还是在Vue中,都有提供对dom的引用的api操作,而这种对dom的引用通常称为Ref。那在Svelte中,我们要如何拿到我们的Ref呢?