关于javascript:Svelte教程翻译一响应

78次阅读

共计 1998 个字符，预计需要花费 5 分钟才能阅读完成。

Svelte 的外围是一个弱小的响应零碎，能够使 DOM 与应用程序状态放弃同步ーー例如，响应一个事件。

为了演示它，咱们首先须要触发一个事件的程序:

<button on:click={handleClick}>

在 handleClick 函数中，咱们须要做的就是扭转 count 的值：

function handleClick() {count += 1;}

残缺代码：

<script>
    let count = 0;

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

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

当组件的状态发生变化时，Svelte 会自动更新 DOM。通常，组件状态的某些局部须要从其余局部计算(例如从 firstname 和 lastname 派生的 fullname)，并在它们产生更改时从新计算。

对于这些，咱们这样做申明：

let count = 0;
$: doubled = count * 2;

不要放心，这看起来尽管有点怪异，但它是无效的 JavaScript，Svelte 将其解释为“当任何援用的值发生变化时，运行这段代码”。一旦你习惯了，就回不去了。

让咱们在 HTML 中实现翻倍成果：

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

当然，您能够只在 HTML 中编写{count * 2}，而不用应用响应。当您须要屡次援用响应时，或者您的值依赖于其余响应时，响应就变得特地有价值。

残缺代码：

<script>
    let count = 0;

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

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

咱们并不局限于响应变量ーー咱们也能够在响应中运行任意语句。例如，如果 count 的值发生变化，咱们能够打印输出：

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

你也能够很容易地将语句组合成一个代码块：

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

你甚至能够把 $: 放在判断分支之类的语法后面：

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

残缺的代码如下：

<script>
    let count = 0;

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

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

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

因为 Svelte 的响应是由赋值触发的，所以应用像 push 和 splice 这样的数组办法不会主动导致更新。

解决这个问题的一个办法是增加一段扭转数组长度的代码：

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

然而还有一个更为简洁的解决方案：

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

您能够应用相似的模式来替换 pop、shift、unshift 和 concat。

对数组和对象属性的赋值ーー例如 obj.foo+=1 或array[i]=x--与对值自身的赋值工作形式雷同。

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

一个简略的教训法令：更新后的变量的名称必须呈现在赋值的左侧。比方这个：

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

obj.foo.bar是不会更新的，除非你用obj=obj。

残缺代码：

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

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

    $: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join('+')} = {sum}</p>

<button on:click={addNumber}>
    Add a number
</button>

如果想亲自演练以上的性能，能够稳步到 Sevlte 官网教程中亲自体验：reactive

正文完