svelte 学习记录(一)

svtelte 是一款更小、更轻量的框架，比现在的三大框架都更轻量，但是应用不广泛。之中的利弊可以移步知乎等论坛

https://www.zhihu.com/question/53150351

Hello world

和vue 比较类似，他也有自己独特的 .svelte  后缀的文件

app.svelte

Hello world!

这个文件会输出对应的 html、js和css 代码，（简直是比vue还要精简）

动态绑定变量

Hello {name}!

用 {} 号将script 中的变量绑定到html中，和jsx语法类似

动态绑定属性

// 或者简写

css 样式

通过

This is a paragraph.

引入组件

This is a paragraph.

引入html 代码片段

通过@html 使用html代码片段，不要忘记之后加个空格哦

{{@html string}

svelte 开发工具插件

• rollup-plugin-svelte
• svelte-loader

更多其他工具 

挂在到实际节点上

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		// we'll learn about props later
		answer: 42
	}
});

响应式编程

通过on:click 绑定点击事件 修改变量之后{} 赋值

	Clicked {count} {count === 1 ? 'time' : 'times'}

计算属性

类似vue的computed  ，通过$:声明一个变量

	Clicked {doubled} {count === 1 ? 'time' : 'times'}

// 等价于 {count * 2}

监听变量

通过$: 之后执行代码，来监听变量，还可加条件监听，类似 react的useEffect 或vue的watch

// case 1
$: console.log(`the count is ${count}`);

// case 2

$: {
	console.log(`the count is ${count}`);
	alert(`I SAID THE COUNT IS ${count}`);
}

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

解决修改array或object 更新问题

数组push、pop、 shift 、unshift 和 splice  不会触发更新，解决办法就是重新 =

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

// case 2 (惯用套路)

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

操作属性也是可以触发更新的 

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

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

 

object 传递引用修改无效 

const foo = obj.foo;
foo.bar = 'baz';

// 解决方法
obj = obj;

props 声明

通过export 对外声明组件变量

The answer is {answer}

通过三点表达式 简化传递属性

还可以使用$$props获取未声明传递的属性  类似react jsx写法

逻辑判断

if语句

{#if} 开始判断 {:else}{:else if}中间拼接 {/if}结束

{#if user.loggedIn}

	Log out

{/if}

{#if !user.loggedIn}

	Log in

{/if}


//或者
{#if user.loggedIn}
	
		Log out
	
{:else}
	
		Log in
	
{/if}

for 循环

cats  是item 、 i是索引值

{#each cats as cat, i}
	

		{i + 1}: {cat.name}
	
{/each}

列表渲染key

id 作为key ，利于正确更新 。默认用thing 更新，会造成更新异常

{#each things as thing (thing.id)}
	
{/each}

await 代码块

利于promise 处理，用于网络请求

{#await promise}
	
...waiting
{:then number}
	
The number is {number}
{:catch error}
	
{error.message}
{/await}

{#await promise then value}
	
the value is {value}
{/await}

事件

通过 on: 绑定事件

	The mouse position is {m.x} x {m.y}


// 不建议这样绑定
m={x:e.clientX,y:e.clientY}}>
   The mouse position is {m.x} x {m.y}

事件绑定修饰符

• once : 绑定事件只执行一次
• preventDefault： 执行时 event.preventDefault()
• stopPropagation： 执行时 event.stopPropagation()
• passive ： 提高scroll事件滚动流畅的效果
• capture ： 事件捕获
• self： 事件发生对象为绑定对象触发。

on:click|once|capture={...}  链式 类似vue 语法.stop

	Click me

组件的自定义事件

通过createEventDispatcher 创建事件触发器 dispatch

注意自定义事件不会冒泡 、所以需要中间组件进行事件转发。通过event.detail 传递

简写

双向绑定

通过bind:  双向绑定进行绑定值 

Hello {name}!

//  自动处理
	
	



	
	


{a} + {b} = {a + b}

	
	Yes! Send me regular email spam

使用bind:group处理 单选按钮组或者多选按钮组 

Size


	
	One scoop



	
	Two scoops



	
	Three scoops


Flavours


	
	Cookies and cream



	
	Mint choc chip



	
	Raspberry ripple


{#if flavours.length === 0}
	
Please select at least one flavour
{:else if flavours.length > scoops}
	
Can't order more flavours than scoops!
{:else}
	

		You ordered {scoops} {scoops === 1 ? 'scoop' : 'scoops'}
		of {join(flavours)}
	
{/if}

	{#each menu as flavour}
		
			{flavour}
		
	{/each}

动态绑定富文本代码片段 

video 、audio标签绑定

• duration（只读）：视频总时间
• buffered（只读）：一个数组包含{start, end}对象
• seekable（只读）：
• played（只读）：
• seeking（只读）：
• ended（只读）：

其他四个 可以双向绑定的

•  currentTime： 当前进度
• playbackRate：播放速度  设置1为正常速度
• paused ： 暂停
• volume： 音量大小 0到1

任何块状元素都有属性clientWidth, clientHeight, offsetWidth 和 offsetHeight  (都是只读) 

	{text}

通过bind:this 获取节点本身，必须要mounted后才能渲染到。 类似 react和vue 的ref

绑定组件的自定义属性 

生命周期

onMount 生命周期应用广泛你可以在这边，初始化发起http请求。

注意：在SSR环境中。除了onDestroy ，其他生命周期都不会触发.

要在组件初始化的时候，调用生命周期的钩子函数，不要在setTimeout中使用

onMount 如果返回一个方法，那个方法会在组件销毁时候调用。类似react 的useEffect

onDestory 组件销毁时候调用。比如说setInterval 。避免内存泄漏

可以封装一下类似react hooks 的工具

// utils.js
import { onDestroy } from 'svelte';

export function onInterval(callback, milliseconds) {
	const interval = setInterval(callback, milliseconds);

	onDestroy(() => {
		clearInterval(interval);
	});
}

// 在组件中使用

beforeUpdate 和 afterUpdate 用于组件更新时候的hook（吐槽下： 官方的例子真的是简洁易懂）

	
Eliza

	

		{#each comments as comment}
			

				{comment.text}
			
		{/each}
	

	

tick 神奇的hooks ，不只再组件初始化的时候可以调用