feat[ptr]: Vue3 将 LifeCycle Function 都抽离成普通函数了，不需要再限定在配置中

Author: ceilf6

Vue3/sandboxs-vite/src/components/Todos.vue

@@ -49,9 +49,22 @@
           <span>items left</span>
         </span>
         <ul class="filters">
-          <li><a href="#/all" class="selected">All</a></li>
-          <li><a href="#/active" class="">Active</a></li>
-          <li><a href="#/completed" class="">Completed</a></li>
+          <li>
+            <!-- 注意动态 class 要用对象，同时别忘记 v-bind 的 : -->
+            <a href="#/all" :class="{ selected: filterRef === 'all' }">All</a>
+          </li>
+          <li>
+            <a href="#/active" :class="{ selected: filterRef === 'active' }"
+              >Active</a
+            >
+          </li>
+          <li>
+            <a
+              href="#/completed"
+              :class="{ selected: filterRef === 'completed' }"
+              >Completed</a
+            >
+          </li>
         </ul>
         <button class="clear-completed" style="display: none">
           Clear completed
@@ -62,7 +75,7 @@
 </template>
 
 <script>
-import { useNewTodo, useTodoList } from "../compositions";
+import { useNewTodo, useTodoList, useFilter } from "../compositions";
 
 export default {
   setup() {
@@ -71,6 +84,7 @@ export default {
       // todoRef: todoList.todoRef,
       todoRef,
       ...useNewTodo(todoRef),
+      ...useFilter(todoRef),
     };
   },
 };

Vue3/sandboxs-vite/src/compositions/index.js

@@ -1,3 +1,4 @@
 export { default as useCount } from './useCount'
 export { default as useNewTodo } from './useNewTodo'
-export { default as useTodoList } from './useTodoList'
+export { default as useTodoList } from './useTodoList'
+export { default as useFilter } from './useFilter'

Vue3/sandboxs-vite/src/compositions/useFilter.js

@@ -0,0 +1,31 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+const filterEnum = ["all", "active", "completed"]
+
+export default function useFilter(todoRef) {
+    const filterRef = ref("all")
+
+    // 筛选方式响应 与 hash 连接
+    const onHashChange = () => {
+        // trim 左边不需要的 #/
+        const hash = location.hash.replace(/#\/?/, "");
+        if (filterEnum.includes(hash)) {
+            filterRef.value = hash
+        } else {
+            filterRef.value = "all"
+            location.hash = "" // "" 虽然是无效会第二次走到这分支，但是 "" => "" 不会触发 hashchange
+        }
+    }
+
+    onMounted(() => {
+        window.addEventListener("hashchange", onHashChange)
+    })
+
+    onUnmounted(() => {
+        window.removeEventListener("hashchange", onHashChange)
+    })
+
+    return {
+        filterRef
+    }
+}