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

1 前言

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

2 正文

Svelte 中同样无法监听以上 7 个数组方法的变动，此外，类似obj.a = 2 这种操作也是无法监听的，因为在 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 让开发者自己决定用什么方法解决该问题，只能说便于开发者理解响应式设计的弊端吧，除此之外找不出其他理由。

4 参考

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

标签：list,pop,响应,length,数组,Svelte,监听
来源： https://www.cnblogs.com/ujiu/p/14865490.html