SvelteJs学习——Reactivity模块

1. Reactivity-事件

Svelte的内核是一个强大的reactivity系统，能够让DOM与你的应用状态保持同步，例如，事件响应。

事件写法： on:[click/mouseover...]={事件名称}

<script>
	import Header from './components/Header.svelte'
	export let count = 0

	function handleClick() {
		count ++
	}
</script>

<main>
	<Header />
	<h1>当前值： {count}</h1>
	<button on:click={handleClick}>我是按钮</button>
</main>

<style>
	h1 {
		color: red;
	}
</style>

2. Reactivity-声明变量值

当组件的状态改变时，Svelte会自动更新DOM。通常，组件状态的某些部分需要通过其他部分的计算而得出，并且在其他部分更改时重新计算

• (理解上类似于computed计算属性)
• $: 计算变量 = 表达式

<script>
	import Header from './components/Header.svelte'
	let count = 0
	$: doubleCount = count * 2

	function handleClick() {
		count ++
	}
</script>

<main>
	<Header />
	<h1>当前值： {count}, 他的二倍是： {doubleCount}</h1>
	<button on:click={handleClick}>我是按钮</button>
</main>

<style>
	h1 {
		color: red;
	}
</style>

3. Reactivity-声明语句

2中声明变量值，指的是，当表达式中包含的值count变化时，那么随之定义的这个值doubleCount也会重新进行计算。而声明表达式值的是，当这个表达式中有某个变量的值count，那么当这个值变化时这个语句就会重新执行console语句

1. 执行某个语句
<script>
$: console.log('count发生变化，变化后的count值为：', {count})
</script>

2. 执行某个代码块
	$: {
		console.log('count发生变化，变化后的count值为：', {count})
		alert('值发生变化，即使aler中没有包含count，当这个代码块中包含了，所以整个内容是一起执行的')
	}
	
3. 执行某个判断条件
	$: if(count > 2) {
		alert('当前count > 2,置为0重新计算')
		count = 0
	}

tips: 之前只知道vue中computed计算属性计算对应的值，在svelte中发现$还可以对应一段执行程序

4. Reactivity-更新数组和对象

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

<script>
	let arr = [1,2,3,4]

	function addEle() {
		arr.push(5)
		console.log(arr)
	}
</script>

<main>
	<p>{arr}</p>
	<button on:click={addEle}>增加元素</button>
</main>

<style>
</style>

当我们点击按钮时，我们会发现每次console打印的内容都在末尾添加了一个元素5，但是视图上却没有任何更新。

因为赋值才会触发反应性，刷新页面中的数据，那么我们围绕这个有以下几种方案

解决方案一：
	function addEle() {
		arr.push(5)
		arr=arr   // 执行一次赋值后页面展示正常，与打印内容一致
	}

解决方案二：
	function addEle() {
		arr=[...arr, 5]
	}

解决方案三：
	function addEle() {
		arr[arr.length] = 5
	}

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

官方文档
如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~