只要你会vue，5分钟学不会 svelte 你来找我

🌻 前言

2023年了，国内前端领域基本被Vue、React占领市场，近几年似乎前端技术栈的迭代更新缓慢了下来。

当然近几年也出现了像svelte、solid.js等一些新兴的前端框架，这些框架有很多创新的点，比如svelte相比于vue,react最大的不同，没有使用虚拟dom，将程序运行时的一系列处理移到了编译阶段，这样理论上就可以大大提高程序运行时的性能。

虽然现在国内svelte不温不火，除了它自身存在的一些问题，主要还是生态不够完善。但是它在国外是非常火的，说不定哪天这团火就烧到国內了🔥。

本文通过和vue语法逐一对比的方式，可以让熟悉vue的同学快速上手svelte~

1. 基础知识

安装svelte项目：

npx degit sveltejs/template my-svelte-project
cd my-svelte-projectnpm install
npm run dev

vue页面都是以.vue结尾，而svelte页面是以.svelte结尾。（吐槽🤧：框架名起的拗口就算了，文件后缀还不能简化，这估计也是在国内流行不起来的一个原因）。

在svelte组件内可以直接写html内容，不像vue需要写在template模版中。
样式写在<style>标签中，自带 scope（样式隔离） 效果。

2. 插值表达式

vue的插值表达式是用双大括号包裹的，而svelte是用一个大括号{}包裹.

动态内容：

<script>
let name = 'world';
</script><h1>Hello {name}!</h1>

动态属性：

直接用{}包裹就行，如果需要拼接，可以用引号包裹，或者用模版字符串也是可以的。

ps：如果变量名和属性名一致，甚至可以简写，例如src={src}可以简写为{src}。如下：

<script>let src = 'https://p3-passport.byteimg.com/img/user-avatar/f51713bb5df34d682e00c40d5078b95e~180x180.awebp';let name = '前端阿彬的头像';
</script><img src={src} alt=""><img {src} alt="图片描述：{name}"><img {src} alt={`${src} : ${name}`}>

3. svelte里的 v-html

vue里使用v-html语法糖向指定节点中渲染包含html结构的内容，即设置元素的innerHTML

在svelte里语法是使用特殊标记{@html ...}

<script>let string = `<strong style="color: red">学如逆水行舟，不进则退！</strong>`;
</script><p>{@html string}</p>

4. svelte里的 v-model 双向绑定

在vue里，v-bind一般用来动态绑定值，v-model用来双向绑定数据。

而到了svelte里，双向绑定是用bind:标记。svelte没有类似于vue的v-bind动态绑定这一说，统统用{}插值表达式就能实现。

<script>let name = 'world';
</script><input bind:value={name}><h1>Hello {name}!</h1>

svelte的双向绑定有个很方便的用法，就是绑定多个值，语法为bind:group。例如在实现复选框组时，可以用bind:group绑定数据，绑定的值会形成一个数组，如下：

let list = ['小红','小美','阿彬'
];
let peoples = [阿彬'];{#each list as people}<label><input type=checkbox bind:group={peoples} value={flavour}>{people}</label>
{/each}

上面代码很简单就能实现一个复选框组合，值绑定给了peoples，是个数组，多个值时格式为['阿彬','小美']。

5. svelte里的 v-on 事件绑定

vue绑定事件用v-on，即语法糖@。
在svelte里绑定事件语法为on:事件名，如下：

function handleClick(){}<button on:click={handleClick}>

同样，svelte也有事件修饰符，语法为on:click|once={handleClick}，可以同时使用多个修饰符，例如on:click|once|capture={handleClick}

svelte的事件修饰符有：

  • preventDefault ：调用event.preventDefault()，阻止默认事件；
  • stopPropagation ：调用 event.stopPropagation(), 阻止冒泡；
  • passive ：优化了对 touch/wheel 事件的滚动表现(Svelte 会在合适的地方自动添加滚动条)；
  • capture：在捕获阶段而不是冒泡阶段触发事件处理程序；
  • once ：事件只能执行一次。
  • self：仅当 event.target 是其本身时才执行。

6. svelte里的 computed + watch

svelte的$: 代码块类似于vue的 computed计算属性 和 watch状态监听 的结合体。

它既能用来声明计算属性，同时可以监听数据变化执行代码块，类似于vue3的watchEffect，它不需要指定要监听的数据，只要在代码块中就会监听。

计算属性举例：

let name = '阿彬'
$: level = name + '是个前端程序员'<p>{ level }</p>

监听数据变化：需要用{}包裹代码块

let val
$: {console.log(`你输入的内容是： ${val}`);alert(`你输入的内容是： ${val}`);
}<input bind:value={val}>

以上代码，只要在输入框输入内容，就会弹窗提示

使用$: 监听数据变化时，可以在{}代码块前使用if语句，是不是很巧妙，能减少很多情况下的代码量。

$: if (count >= 10) {alert(`count is dangerously high!`);count = 9;
}

7. svelte里的 v-if

svelt里的v-if条件语句语法有点像uniapp的条件编译。由首尾两个标记包裹需要根据条件控制显隐的dom代码块，语法如下：

字符#始终表示块开始标记。字符/始终表示块结束标记。:中的字符表示{:else}块连续标记。

svelte的逻辑语句都是用开始标记#和结束标记/包裹。 逻辑语句包括if else条件编译、each 遍历渲染、await块，也就是本文7、8、9点。

{#if 条件}    代码块    
{/if}

举例：

{#if user.loggedIn}<button on:click={toggle}>Log out</button>
{/if}{#if !user.loggedIn}<button on:click={toggle}>Log in</button>
{/if}

if条件语句中的else、else if写法：

{#if x > 10}<p>{x} is greater than 10</p>
{:else if 5 > x}<p>{x} is less than 5</p>
{:else}<p>{x} is between 5 and 10</p>
{/if}

8. svelte里的 v-for

vue的v-for语法为v-for=(item,index) in list) :key="index"。
svelte遍历渲染使用的是 each 块：

下面例子中，类比vue，cat就是遍历的item:

<script>let cats = [{ id: '1', name: 'Keyboard Cat' },{ id: '2', name: 'Maru' },{ id: '3', name: 'Henri The Existential Cat' }];
</script><ul>{#each cats as cat (cat.id)}<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">{cat.name}</a></li>{/each}
</ul>

怎么像vue一样，增加索引当第二个参数呢，写法如下，用,逗号分隔就行：

{#each cats as cat,i}<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">{cat.name}</a></li>
{/each}

v-for里的key唯一标识符，到了svelte里，只要在each块后括号说明key是什么就行，如下，id作为key

{#each cats as cat,i (cat.id)}<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">{cat.name}</a></li>
{/each}

9. 巧妙的 await 块

如果在开发一个用户个人主页时，在数据加载时需要显示骨架屏，加载成功正常显示页面，加载失败显示错误提示。

像这种依赖于异步请求决定页面的不同显示逻辑的场景，就可以使用 svelte 的 await 标记代码块。使用方法如下：

<script>let promise = getRandomNumber();async function getRandomNumber() {const res = await fetch(`tutorial/random-number`);const text = await res.text();if (res.ok) {return text;} else {throw new Error(text);}}
</script>{#await promise}<p>...waiting</p>
{:then number}<p>The number is {number}</p>
{:catch error}<p style="color: red">{error.message}</p>
{/await}

可以看到，可以很容易显示一个三种不同状态下的页面显示，甚至不需要声明什么变量来承接请求得到的数据，是不是很巧妙 🤙🤙🤙

如果你不需要判断请求错误的情况，则可以忽略 catch 块。如果在请求完成之前不想程序执行任何操作，也可以忽略第一个块。如下：

{#await promise then value}<p>the value is {value}</p>
{/await}

10. 引入组件

svelte引入使用组件类似vue3，引入就可以直接使用，不需要注册。同时要注意组件名要大写，和html标签区分开。

<script>import Child from './Nested.svelte';
</script><Child/>

11. 组件传参

vue中父组件向子组件传参，常规方式是在子组件用 props 声明可以接收的自定义属性。

而svelte则不同，它是在子组件中用 export 声明需要接收的props参数。
export导出时赋值就是设置默认值。

注意: 与vue不同，svelte子组件接收的props数据是可以在子组件里直接修改的！

//父组件
import Child from './Child.svelte';
<Child content="父组件内容"/>//子组件
<script>export let content;
</script><p>The answer is {answer}</p>

传递多个参数： 如果你的组件含有一个对象属性，可以利用...扩展运算符一次性绑定，如下：

const pkg = {name: 'svelte',version: 3,speed: 'blazing',website: 'https://svelte.dev'
};<Info {...pkg}/>
//相当于
<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/>

12. 子组件自定义事件

子组件自定义事件，即实现子组件调用父组件方法。

在子组件内需要使用createEventDispatcher 在首次实例化组件时，定义一个dispatch进行连接，进而把组件实例化。具体使用如下：

//父组件
<script>import Inner from './Inner.svelte';function handleMessage(event) {alert(event.detail.text);}
</script>
<Inner on:message={handleMessage}/>//子组件
<script>import { createEventDispatcher } from 'svelte';const dispatch = createEventDispatcher();function sayHello() {dispatch('message', {text: 'Hello!'});}
</script><button on:click={sayHello}>Click to say hello
</button>

如果想为组件注册dom事件，只需要在子组件内部需要触发这个事件的地方加上on:事件名就行，例如：

<button on:click>Click me
</button>

这样就可以在使用这个子组件时绑定on:click事件了。

13.ref 获取dom元素引用

this可以绑定到任何标签 (或组件) 并允许你获取对渲染标签的引用。 例如，我们对<canvas> 标签进行绑定：

<canvasbind:this={canvas}width={32}height={32}
></canvas>

注意，svelte也是有生命周期的，在onMount生命周期前，组件还没有挂载完毕，canvas的值这时候是undefined，所以如果要操作dom引用，需要在 onMount 生命周期后。

14. 生命周期

svelte的生命周期只有四个，分别是：

  • onMount：页面渲染完成后；
  • onDestroy：组件销毁前；
  • onDestroy：DOM渲染完成前执行；
  • onDestroy：在异步数据加载完成后执行；

PS：tick函数不同于其他生命周期函数，因为你可以随时调用它。它类似于vue的nextTick，每当组件pending状态变化便会立即体现到DOM中 (除非没有pending状态变化)。

15.数组/对象赋值

由于 Svelte 的响应式是由赋值语句触发的，因此使用数组的诸如 push 和 splice 之类的方法就不会触发自动更新视图。

解决该问题的一种方法是多执行一个赋值的语句：

function addNumber() {numbers.push(numbers.length + 1);numbers = numbers;
}

但还有一个更惯用的解决方案：

function addNumber() {numbers = [...numbers, numbers.length + 1];
}

你可以使用类似的模式来替换 pop、shift、unshift 和 splice 方法。

另外，需要注意只有被更新的变量名称出现在赋值语句的左侧，才能在变量变化时更新其视图。例如下面这种情况视图是不会修改的：

<script>const obj = {foo: {name: '阿彬'}}const foo = obj.foo;const handleClick = () => {foo.name = '小美'  //因为obj没出现在赋值表达式左侧，所以下面的p标签内容不会变化}
</script><p>{ JSON.stringify(obj) }</p>
//在输入内容时，上面的p标签显示不会变化
<input bind:value={ foo.name }>
//点击时，上面的p标签显示也不会变化
<button on:click={handleClick}>测试</button>

🎁 说在最后

svelte的使用还是很简单的，如果你会vue，相信你花5分钟读完这篇文章，就可以上手开发svelte了 🥳🥳🥳

我是喜欢归纳总结前端相关知识的前端阿彬，尽力持续输出原创优质文章，欢迎点赞关注😘

表情包2.webp

往期文章：
# 🧙‍♀️css魔法：伪元素content ➕ css函数
# 玩转css逐帧动画，纯css让哥哥动起来💃
# 🕸2023 前端 SEO 无死角解读
# 我给自己搭建的前端导航网站，你们都别用🤪
# 2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！
# 浅谈 强制缓存/协商缓存 怎么用？
# 2023 前端性能优化清单

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/6037.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JS文件UTF8格式乱码问题

JS文件UTF8格式乱码问题

UTF8格式的JS文件在IE中显示乱码问题的解决 这种情况通常是由于JS文件头缺少BOM标志引起的,解决方式: 方法1:用系统自带记事本,另存为 UTF-8,覆盖原文件,会自动加上BOM标志(就是文件开头的EF BB BF 三个字节) 方法2: 用notepad 打开,编码菜单,由UTF8编码改为 UTF8-BOM编码
阅读更多...
利用RabbitMQ实现消息投递削峰填谷

利用RabbitMQ实现消息投递削峰填谷

目录 异步和同步如何选择 异步线程 同步收发消息 一、导入依赖库 二、创建RabbitMQ配置类 三、创建消息任务类 异步和同步如何选择 依靠多线程&#xff0c;Java代码可以同步执行也可以异步执行 RabbitMQ提供了同步和异步两种收发消息模式 我们采用 Java异步线程 MQ同步…
阅读更多...
机器学习小结之决策树

机器学习小结之决策树

文章目录 前言一、介绍1.1 原理1.2 流程1.3 信息熵&#xff0c;信息增益和基尼不纯度 二、构建决策树2.1 特征选择2.2 决策树生成2.3 剪枝 三、经典算法3.1 ID33.2 C4.53.3 CART 四、案例4.1 Iris 数据集 鸢尾花 分类4.2 基于决策树的英雄联盟游戏胜负预测 参考 前言 决策树(D…
阅读更多...
盒马上市，即时零售最大“变量”

盒马上市，即时零售最大“变量”

若盒马年内成功上市&#xff0c;等待完成下一轮融资的朴朴超市的处境恐将更加尴尬&#xff0c;另区域性中小商超或将迎来新一轮倒闭潮。 疫情过后&#xff0c;国内消费市场一直处于走弱态势。据商务大数据监测&#xff0c;今年端午假期&#xff0c;部分地区零售和餐饮数据远不及…
阅读更多...
2023年前端面试汇总-React

2023年前端面试汇总-React

1. 组件基础 1.1. React事件机制 <div onClick{this.handleClick.bind(this)}>点我</div> React并不是将click事件绑定到了div的真实DOM上&#xff0c;而是在document处监听了所有的事件&#xff0c;当事件发生并且冒泡到document处的时候&#xff0c;React将事…
阅读更多...
【Linux】基础IO——文件描述符/缓冲区/重定向/文件系统

【Linux】基础IO——文件描述符/缓冲区/重定向/文件系统

文章目录 一、文件描述符二、缓冲区三、重定向的原理四、文件系统 (Linux Ext2)1 认识磁盘的结构CHSLBABlock 2 认识文件系统2.1 分区2.2 文件系统的结构2.3 剖析inode2.4 文件的操作 3 软硬链接3.1 软链接3.2 硬链接 &#x1f4dd; 个人主页 &#xff1a;超人不会飞)&#x1f…
阅读更多...
JVM 常量池、即时编译与解析器、逃逸分析

JVM 常量池、即时编译与解析器、逃逸分析

一、常量池 1.1、常量池使用 的数据结构 常量池底层使用HashTable key 是字符串和长度生成的hashValue&#xff0c;然后再hash生成index, 改index就是key&#xff1b;Value是一个HashTableEntry&#xff1b; 1、key hashValue hash string(name&#xff0c; len) i…
阅读更多...
LVS负载均衡群集部署——NAT模式

LVS负载均衡群集部署——NAT模式

LVS负载均衡群集部署——NAT模式 一、企业群集应用概述1、群集概述2、解决方法3、根据集群针对的目标差异分类 二、负载均衡群集架构三、LVS 的三种工作模式1、NAT 地址转换2、TUN IP隧道 IP Tunnel3、DR 直接路由 Direct Routing 四、LVS的负载调度算法五、ipvsadm工具六、NAT…
阅读更多...
linux shell pgrep命令使用方法（pgrep指令）获取进程号、统计进程数量（学会区分Linux进程进程名）

linux shell pgrep命令使用方法（pgrep指令）获取进程号、统计进程数量（学会区分Linux进程进程名）

文章目录 问题背景pgrep指令help文档使用示例1. 列出匹配进程的PID和进程名称&#xff08;-l&#xff09;&#xff08;默认只能从进程名的子集字符串匹配&#xff0c;如果要使用完整进程名的子集字符串匹配&#xff0c;请加-f参数&#xff0c;下同&#xff09;2. 列出匹配进程的…
阅读更多...
生成古风少女图片【InsCode Stable Diffusion美图活动一期】

生成古风少女图片【InsCode Stable Diffusion美图活动一期】

作者简介&#xff1a;一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​ 目录 写在前面 Stable Diffusion 模型在线使用地址&#xff1a; 工具介绍 一.如何使用S…
阅读更多...
【NLP】用python实现文本转语音处理

【NLP】用python实现文本转语音处理

一、说明 介绍一款python调用库&#xff0c;离线软件包pyttsx3 API&#xff0c;它能够将文字转化成语音文件。Python 中有多种 API 可用于将文本转换为语音。pyttsx3 是一个非常易于使用的工具&#xff0c;可将输入的文本转换为音频。与其它类似的库不同&#xff0c;它可以离线…
阅读更多...
第十八章 MobileViT网络详解

第十八章 MobileViT网络详解

系列文章目录 第一章 AlexNet网络详解 第二章 VGG网络详解 第三章 GoogLeNet网络详解 第四章 ResNet网络详解 第五章 ResNeXt网络详解 第六章 MobileNetv1网络详解 第七章 MobileNetv2网络详解 第八章 MobileNetv3网络详解 第九章 ShuffleNetv1网络详解 第十章…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023