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>

3 总结

比起 Vue 改写了7个数组元素的操作，Svelte 让开发者自己决定用什么方法解决该问题，只能说便于开发者理解响应式设计的弊端吧，除此之外找不出其他理由。

注意：对象的响应式同样遵循被更新的变量的名称必须出现在赋值语句的左侧这一设定，也就是说，obj.a = 123 可以正确响应，而 delete obj.b 不能。

4 参考

• https://www.sveltejs.cn/tutorial/updating-arrays-and-objects