面试题：Svelte中writable与derived在状态管理的应用场景差异

Question

请阐述在Svelte中，writable和derived这两种状态管理方式在应用场景上有什么不同？分别列举至少两个适合使用writable和derived的实际场景，并简要说明原因。

Answer 1

writable

• 应用场景1：用户输入状态管理
  • 原因：比如在一个登录表单中，用户输入的用户名和密码，它们是独立的、可变的状态。使用writable可以方便地跟踪用户输入的变化，并且在需要时进行验证和提交等操作。
• 应用场景2：切换按钮状态
  • 原因：例如一个主题切换按钮，点击按钮在亮色主题和暗色主题间切换。按钮的状态（当前是亮色还是暗色主题）是一个简单且独立可变的状态，writable能很好地管理这种状态的变化，进而更新页面的显示。

derived

• 应用场景1：购物车总价计算
  • 原因：购物车中商品列表是writable状态，而总价依赖于商品的单价和数量。通过derived可以根据商品列表状态自动计算出总价，当商品列表中的任何商品单价或数量变化时，总价会自动更新，实现了一种依赖关系的状态管理。
• 应用场景2：分页数据显示
  • 原因：假设后端返回一个包含所有数据的列表（writable状态），而页面上需要按页显示数据。通过derived可以根据当前页码和每页显示数量（也可以是writable状态）从总的数据列表中计算出当前页要显示的数据，这样当页码或每页数量变化时，当前页显示数据能自动更新。