Svelte 对数组和对象操作时的响应式

1 前言

Vue2 中无法监听7个数组方法引发的变化，它们分别是：pop、push、reverse、shfit、unshift、sort 和 splice。

2 正文

Svelte 中同样无法监听以上 7 个数组方法的变动，此外，类似delete obj.a 这种操作也是无法监听的，因为在 Svelte 中，被更新的变量的名称必须出现在赋值语句的左侧。

<script>
  const list = Array.from({ length: 6 }).map((i, index) => index);
  const minus = () => {
    // list.pop(); // 不生效
    list.length = list.length - 1; // 生效
  };
</script>

<button on:click={minus}>{list.length}</button>
<p>{list}</p>