4、Vue.js开发实战：Todo列表与本地天气应用

Vue.js开发实战：Todo列表与本地天气应用

1. Todo列表排序与状态保存

在开发应用时，我们常常需要对列表进行排序。对于没有副作用且包含响应式数据的变量，Vue.js的 computed 函数是一个很好的选择。

首先，我们需要在 TodoList 组件中导入 computed 函数：

import { ref, computed } from 'vue'

computed 函数与 ref 类似，当值发生变化时，它们都会更新DOM，并且在脚本块中都可以使用 .value 属性访问值。不同的是， computed 值是缓存的，只有当输入发生变化时才会更新。

为了对列表进行排序，我们以 listItems 作为输入，并应用一个简单的JavaScript排序函数：

const sortedList = computed(() => [
  ...listItems.value
].sort((a, b) => (a.checked ? 1 : 0) - (b.checked ? 1 : 0)))

在模板中，我们将 listItems 替换为 s