{"id":452,"date":"2026-06-01T09:13:17","date_gmt":"2026-06-01T01:13:17","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=452"},"modified":"2026-06-17T11:23:46","modified_gmt":"2026-06-17T03:23:46","slug":"%e5%b8%b8%e7%94%a8hooks","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2026\/06\/01\/%e5%b8%b8%e7%94%a8hooks\/","title":{"rendered":"\u5e38\u7528Hooks"},"content":{"rendered":"\n

Vue3 \u628a\u57fa\u4e8e\u51fd\u6570\u3001\u53ef\u590d\u7528\u7684\u903b\u8f91\u7247\u6bb5\u7edf\u79f0\u4e3a \u7ec4\u5408\u5f0f\u51fd\u6570\uff08Composables\uff09<\/strong>\uff0c\u65e5\u5e38\u5927\u5bb6\u53e3\u8bed\u90fd\u53eb hook<\/code>\uff0c\u7528\u6cd5\u548c React Hook \u601d\u8def\u7c7b\u4f3c\uff0c\u4f46 API\u3001\u89c4\u5219\u5b8c\u5168\u662f Vue \u4f53\u7cfb\u3002<\/p>\n\n\n\n

    \n
  1. Vue3 \u5185\u7f6e Hook<\/strong> Vue \u5b98\u65b9\u63d0\u4f9b\u7684\u539f\u751f API\uff1aref<\/code> \/ reactive<\/code> \/ computed<\/code> \/ watch<\/code> \/ onMounted<\/code> \/ useRoute<\/code> \u7b49\uff0c\u662f\u7ec4\u5408\u5f0f API \u57fa\u7840\u3002<\/li>\n\n\n\n
  2. \u81ea\u5b9a\u4e49 Hook\uff08\u7ec4\u5408\u5f0f\u51fd\u6570\uff09<\/strong> \u628a\u91cd\u590d\u903b\u8f91<\/strong>\uff08\u7a97\u53e3\u76d1\u542c\u3001\u8bf7\u6c42\u3001\u8868\u5355\u3001\u6743\u9650\u3001\u6eda\u52a8\u6761\u3001\u672c\u5730\u5b58\u50a8\u7b49\uff09\u62bd\u6210\u72ec\u7acb\u51fd\u6570\uff0c\u591a\u7ec4\u4ef6\u590d\u7528\u3002<\/li>\n<\/ol>\n\n\n\n
    \n

    \u89c4\u8303\u7ea6\u5b9a\uff1aVue \u81ea\u5b9a\u4e49 Hook \u51fd\u6570\u540d\u5efa\u8bae\u4ee5 use<\/code> \u5f00\u5934<\/strong>\uff08\u548c React \u4e60\u60ef\u4e00\u81f4\uff0c\u56e2\u961f\u7edf\u4e00\u89c4\u8303\uff09\u3002<\/p>\n<\/blockquote>\n\n\n\n

    Vue3 \u5185\u7f6e\u5e38\u7528 Hook<\/h2>\n\n\n\n

    1. \u57fa\u7840\u54cd\u5e94\u5f0f<\/h2>\n\n\n\n

    1.1 ref<\/code> \u57fa\u672c\u7c7b\u578b\u54cd\u5e94\uff08\u5b57\u7b26\u4e32 \/ \u6570\u5b57 \/ \u5e03\u5c14\uff09<\/h3>\n\n\n\n
    <template>\n  <div>{{ count }}<\/div>\n  <button @click=\"count++\">+1<\/button>\n<\/template>\n\n<script setup>\n\/\/ \u5bfc\u5165\u5185\u7f6e API\nimport { ref } from 'vue'\n\n\/\/ \u521b\u5efa\u54cd\u5e94\u5f0f\u53d8\u91cf\nconst count = ref(0)\n\/\/ JS \u4e2d\u53d6\u503c\/\u8d4b\u503c\u8981\u52a0 .value\nconsole.log(count.value)\n<\/script><\/code><\/pre>\n\n\n\n
    1.2 reactive<\/code> \u5bf9\u8c61 \/ \u6570\u7ec4\u54cd\u5e94<\/h3>\n\n\n\n
    import { reactive } from 'vue'\n\nconst user = reactive({\n  name: '\u5f20\u4e09',\n  age: 18\n})\n\/\/ \u76f4\u63a5\u4fee\u6539\u5c5e\u6027\uff0c\u4e0d\u7528 .value\nuser.name = '\u674e\u56db'<\/code><\/pre>\n\n\n\n
    1.3 computed<\/code> \u8ba1\u7b97\u5c5e\u6027\uff08\u6d3e\u751f\u6570\u636e\uff09<\/h3>\n\n\n\n
    import { ref, computed } from 'vue'\n\nconst count = ref(0)\n\/\/ \u53ea\u8bfb\u8ba1\u7b97\u5c5e\u6027\nconst doubleCount = computed(() => count.value * 2)<\/code><\/pre>\n\n\n\n
    2. \u76d1\u542c\u7c7b Hook<\/h2>\n\n\n\n
    2.1 watch<\/code> \u76d1\u542c\u6570\u636e\u53d8\u5316<\/h3>\n\n\n\n
    import { ref, watch } from 'vue'\n\nconst name = ref('')\n\n\/\/ \u76d1\u542c name\nwatch(name, (newVal, oldVal) => {\n  console.log('\u65b0\u503c\uff1a', newVal)\n}, { immediate: true }) \/\/ immediate \u7acb\u5373\u6267\u884c\u4e00\u6b21\n<\/code><\/pre>\n\n\n\n
    2.2 watchEffect<\/code> \u81ea\u52a8\u6536\u96c6\u4f9d\u8d56<\/h3>\n\n\n\n
    \u4e0d\u7528\u6307\u5b9a\u76d1\u542c\u8c01\uff0c\u5185\u90e8\u7528\u5230\u7684\u54cd\u5e94\u5f0f\u53d8\u4e86\u5c31\u6267\u884c\uff1a<\/p>\n\n\n\n
    watchEffect(() => {\n  console.log(name.value)\n})\n<\/code><\/pre>\n\n\n\n
    3. \u751f\u547d\u5468\u671f Hook\uff08Vue3 \u7ec4\u5408\u5f0f\u5199\u6cd5\uff09<\/h2>\n\n\n\n
    \u5bf9\u5e94 Vue2 \u7684\u751f\u547d\u5468\u671f\uff0c\u5168\u90e8\u662f\u51fd\u6570\u5f62\u5f0f\uff1a<\/p>\n\n\n\n
    import { \n  onMounted,    \/\/ \u6302\u8f7d\u5b8c\u6210\n  onUpdated,    \/\/ \u66f4\u65b0\u5b8c\u6210\n  onUnmounted   \/\/ \u5378\u8f7d\u9500\u6bc1\n} from 'vue'\n\n\/\/ \u7ec4\u4ef6\u6302\u8f7d\u540e\u6267\u884c\uff08\u66ff\u4ee3 mounted\uff09\nonMounted(() => {\n  console.log('\u7ec4\u4ef6\u5df2\u6e32\u67d3\u5230\u9875\u9762')\n})\n\n\/\/ \u7ec4\u4ef6\u9500\u6bc1\u524d\u6267\u884c\uff08\u6e05\u7406\u5b9a\u65f6\u5668\u3001\u76d1\u542c\u3001\u4e8b\u4ef6\uff09\nonUnmounted(() => {\n  console.log('\u7ec4\u4ef6\u9500\u6bc1')\n})\n<\/code><\/pre>\n\n\n\n
    4. \u8def\u7531 \/ \u72b6\u6001\u5e93\u5e38\u7528\uff08\u642d\u914d\u751f\u6001\uff09<\/h2>\n\n\n\n
    Vue Router 4 Hook<\/h3>\n\n\n\n
    import { useRoute, useRouter } from 'vue-router'\n\nconst route = useRoute()   \/\/ \u83b7\u53d6\u5f53\u524d\u8def\u7531\u4fe1\u606f\u3001\u53c2\u6570\nconst router = useRouter() \/\/ \u7f16\u7a0b\u5f0f\u8df3\u8f6c\n\nconsole.log(route.path)\nrouter.push('\/login')\n<\/code><\/pre>\n\n\n\n
    Pinia \u72b6\u6001\u5e93 Hook<\/h3>\n\n\n\n
    import { useUserStore } from '@\/stores\/user'\nconst userStore = useUserStore()\nconsole.log(userStore.token)<\/code><\/pre>\n\n\n\n
    \u81ea\u5b9a\u4e49 Hook\uff08\u6838\u5fc3\uff1a\u903b\u8f91\u590d\u7528\uff09<\/h1>\n\n\n\n
    \u89c4\u5219<\/h2>\n\n\n\n
      \n
    1. \u51fd\u6570\u540d useXXX<\/strong> \u5f00\u5934\uff1b<\/li>\n\n\n\n
    2. \u5185\u90e8\u53ef\u4ee5\u4f7f\u7528\u6240\u6709 Vue \u5185\u7f6e API\uff1b<\/li>\n\n\n\n
    3. \u628a\u9700\u8981\u590d\u7528\u7684\u903b\u8f91\u62bd\u8fdb\u53bb\uff0c\u8fd4\u56de\u53d8\u91cf \/ \u65b9\u6cd5<\/strong>\u7ed9\u7ec4\u4ef6\u4f7f\u7528\uff1b<\/li>\n\n\n\n
    4. \u4e00\u4e2a Hook \u53ea\u505a\u4e00\u4ef6\u4e8b\uff08\u5355\u4e00\u539f\u5219\uff09\u3002<\/li>\n<\/ol>\n\n\n\n
      1. \u65b0\u5efa Hook \u6587\u4ef6 hooks\/useWindowWidth.js<\/code><\/h3>\n\n\n\n
      \/\/ \u81ea\u5b9a\u4e49 Hook\uff1a\u83b7\u53d6\u5e76\u76d1\u542c\u6d4f\u89c8\u5668\u7a97\u53e3\u5bbd\u5ea6\nimport { ref, onMounted, onUnmounted } from 'vue'\n\nexport function useWindowWidth() {\n  \/\/ \u54cd\u5e94\u5f0f\u53d8\u91cf\u4fdd\u5b58\u7a97\u53e3\u5bbd\u5ea6\n  const windowWidth = ref(window.innerWidth)\n\n  \/\/ \u66f4\u65b0\u5bbd\u5ea6\n  const updateWidth = () => {\n    windowWidth.value = window.innerWidth\n  }\n\n  \/\/ \u6302\u8f7d\u65f6\u76d1\u542c resize\n  onMounted(() => {\n    window.addEventListener('resize', updateWidth)\n  })\n\n  \/\/ \u9500\u6bc1\u65f6\u79fb\u9664\u76d1\u542c\uff08\u9632\u6b62\u5185\u5b58\u6cc4\u6f0f\uff09\n  onUnmounted(() => {\n    window.removeEventListener('resize', updateWidth)\n  })\n\n  \/\/ \u5bf9\u5916\u66b4\u9732\u53d8\u91cf\n  return { windowWidth }\n}<\/code><\/pre>\n\n\n\n
      \u5c01\u88c5\u300c\u672c\u5730\u5b58\u50a8 localStorage\u300dHook<\/h2>\n\n\n\n
      hooks\/useLocalStorage.js<\/code><\/h3>\n\n\n\n
      import { ref, watch } from 'vue'\n\nexport function useLocalStorage(key, defaultValue) {\n  \/\/ \u8bfb\u53d6\u672c\u5730\u503c\n  const stored = localStorage.getItem(key)\n  const data = ref(stored ? JSON.parse(stored) : defaultValue)\n\n  \/\/ \u53d8\u5316\u81ea\u52a8\u540c\u6b65\u5230 localStorage\n  watch(\n    data,\n    (val) => {\n      localStorage.setItem(key, JSON.stringify(val))\n    },\n    { deep: true }\n  )\n\n  return data\n}\n<\/code><\/pre>\n\n\n\n
      \u7ec4\u4ef6\u4f7f\u7528<\/h3>\n\n\n\n
      <script setup>\nimport { useLocalStorage } from '@\/hooks\/useLocalStorage'\n\n\/\/ \u8bfb\u5199\u81ea\u52a8\u540c\u6b65 localStorage\nconst token = useLocalStorage('token', '')\n<\/script>\n\n<template>\n  <div>Token\uff1a{{ token }}<\/div>\n  <button @click=\"token = '123456'\">\u4fee\u6539Token<\/button>\n<\/template>\n<\/code><\/pre>\n\n\n\n
      \n\n\n\n
      \u5b9e\u6218 3\uff1a\u5c01\u88c5\u300c\u8bf7\u6c42 Loading + \u63a5\u53e3\u300dHook\uff08\u4e1a\u52a1\u6700\u5e38\u7528\uff09<\/h2>\n\n\n\n
      \/\/ hooks\/useRequest.js\nimport { ref } from 'vue'\n\nexport function useRequest(apiFn) {\n  const loading = ref(false)\n  const data = ref(null)\n  const error = ref(null)\n\n  \/\/ \u6267\u884c\u8bf7\u6c42\u65b9\u6cd5\n  const run = async (...args) => {\n    loading.value = true\n    error.value = null\n    try {\n      const res = await apiFn(...args)\n      data.value = res\n    } catch (err) {\n      error.value = err\n    } finally {\n      loading.value = false\n    }\n  }\n\n  return { loading, data, error, run }\n}<\/code><\/pre>\n\n\n\n
      \u4f7f\u7528<\/h3>\n\n\n\n
      <script setup>\nimport { useRequest } from '@\/hooks\/useRequest'\nimport { getUserInfo } from '@\/api\/user'\n\nconst { loading, data, run } = useRequest(getUserInfo)\n\n\/\/ \u8c03\u7528\u63a5\u53e3\nrun()\n<\/script>\n\n<template>\n  <div v-if=\"loading\">\u52a0\u8f7d\u4e2d...<\/div>\n  <div v-else>{{ data?.name }}<\/div>\n<\/template><\/code><\/pre>\n\n\n\n
      Vue Hook \u548c React Hook \u5bf9\u6bd4<\/h1>\n\n\n\n
        \n
      1. \u8c03\u7528\u65f6\u673a<\/strong>\n