切换器

# 题目:

首先来看到这个题目的描述，这个挑战我们要编写可组合的函数，也就是我们通常所说的钩子函数。

# 分析:

首先我们分析下这个钩子函数需要完成的逻辑，我们要暴露出 state 状态和 toggle 切换函数，并且触发这个 toggle 的时候，state 的状态要随之改变，那么具体怎么写呢？

# 解决:

<script setup>
import { ref } from "vue";
/**
 * 实现一个切换状态的可组合函数
 * 确保该功能正常工作
 */
function useToggle(switchs) {
  const state = ref(switchs);
  function toggle() {
    state.value = !state.value;
  }
  return [state, toggle];
}

const [state, toggle] = useToggle(false);
</script>
<template>
  <p>State: {{ state ? "ON" : "OFF" }}</p>
  <p @click="toggle">Toggle state</p>
</template>

首先这个函数会传入一个初始状态进来，例如这里是 false，我们在钩子函数中用变量 state 接收这个值，然后当用户点击切换的时候，触发 toggle 方法，将这个 state 的状态改变为取反后的状态，false 就变为 true，true 就变为 false。最后把这个 state 状态和 toggle 方法暴露出去就完成了我们的钩子函数。

# 问题

那么 useToggle 这个钩子函数是如何进行状态保存的呢？

看到这个函数，我们发现 useToggle 接受一个初始状态值 switchs，并通过 ref函数将其转换为一个响应式引用 state。这意味着 state 是一个对象，其 value 属性存储了实际的状态值。由于使用了响应式引用，当 state.value 的值发生变化时，任何依赖于此值的部分（例如在模板中的显示）都会自动更新。这意味着状态值是持久化的，并且能够随着时间的推移自动保持和更新。

← 优化性能的指令 until→