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

本文主要是介绍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

这篇关于Svelte 对数组和对象操作时的响应式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！