3 svelte-- 反应性

官网中介绍到：Svelete 的内核是一个强大的 （反应性）reactivity 系统，能够让 DOM 与你的应用程序状态保持同步，例如，事件响应。

（1）赋值

<script>
	let count = 0;

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

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

Svelte 其实是将此赋值语句替换为一些代码，这些代码将通知 Svelte 更新 DOM。这里的count 变量实际上和在Vue中的data变量类似。

（2）声明

当组件的状态改变时，Svelte 会自动更新 DOM。通常，组件状态的某些部分需要通过其它部分的计算而得出（例如 fullname 就是 firstname 和 lastname 的合体），并在其它部分更改时重新计算。

对于这些，我们提供了反应性声明

let count = 0;
$: doubled = count * 2;
$: console.log(doubled,'val');

看来其有点陌生，不过别担心。上述是有效（非常规）的 JavaScript 语句，Svelte 会将其解释为 “只要参考值变化了就重新运行此代码”。

我们在 HTML 标签内来使用 doubled：

<p>{count} doubled is {doubled}</p>

（3）语句

我们不仅提供了声明反应式的值，我们还可以运行反应式的语句。例如，当 count 的值改变时就输出到日志中：

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

你可以轻松地将一组语句组合成一个代码块：

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

你甚至可以将 $: 放在= if 代码块前面：

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

总结：这里的$: 符号类似于Vue中的wacth和computed监视器和计算属性结合。当doubled 发生变化的时候会执行此行代码

（4）更新数组和对象

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

解决该问题的一种方法是添加一个多余的赋值语句：

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

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

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

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

赋值给数组和对象的 属性（properties） （例如，obj.foo += 1 或 array[i] = x）与对值本身进行赋值的方式相同。

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

一个简单的经验法则是：被更新的变量的名称必须出现在赋值语句的左侧。例如下面这个：

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

（1）赋值

（2）声明

（3）语句

（4）更新数组和对象

猜你喜欢