\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u8fd9\u4e00\u8282\u4e86\u89e3\u4e00\u4e0bVue3\u4e2d\u7684\u81ea\u5b9a\u4e49Hook,\u5b83\u4e5f\u53eb\u7ec4\u5408\u5f0f\u51fd\u6570，\u672c\u8d28\u5c31\u662f\u62bd\u79bb\u51fa\u6765\u3001\u53ef\u590d\u7528\u7684setup\u903b\u8f91\u51fd\u6570，\u7ea6\u5b9a\u4ee5use\u5f00\u5934\u547d\u540d，\u7b80\u5355\u603b\u7ed3\u5982\u4e0b:<\/p>\n
\u81ea\u5b9a\u4e49Hook\u672c\u8eab\u4e0d\u662f API，\u4f46\u662f\u5185\u90e8\u4e00\u822c\u4f1a\u4f7f\u7528\u4e0b\u9762\u8fd9\u4e9bVue API：
\n1. ref：\u5b9a\u4e49\u57fa\u7840\u54cd\u5e94\u5f0f\u6570\u636e
\n2. reactive：\u5bf9\u8c61\u7c7b\u578b\u54cd\u5e94\u5f0f
\n3. computed：\u8ba1\u7b97\u5c5e\u6027
\n4. watch\/watchEffect：\u76d1\u542c\u6570\u636e\u53d8\u5316\u3001\u6267\u884c\u526f\u4f5c\u7528
\n5. onMounted\/onUnmounted：\u751f\u547d\u5468\u671f\u94a9\u5b50（\u5728Hook\u5185\u90e8\u6ce8\u518c，\u7ec4\u4ef6\u9500\u6bc1\u81ea\u52a8\u6e05\u7406）<\/p>\n
\u573a\u666f
\n1 \u901a\u7528DOM \u4ea4\u4e92：useMouse\u3001useClickOutside\u3001useScroll
\n2 \u5f02\u6b65\u8bf7\u6c42\u5c01\u88c5：useRequest
\n3 \u5b9a\u65f6\u5668\u3001\u4e8b\u4ef6\u76d1\u542c<\/p>\n
\u6817\u5b50:<\/p>\n
<template>
\n <div>
\n <h3>\u9f20\u6807\u5750\u6807Hook<\/h3>
\n <p>X：{{ x }}<\/p>
\n <p>Y：{{ y }}<\/p>
\n <\/div>
\n<\/template><\/p>\n
<script setup>
\nimport { ref, onMounted, onUnmounted } from 'vue'<\/p>\n
\/\/ \u81ea\u5b9a\u4e49Hook：useMouse
\nfunction useMouse() {
\n const x = ref(0)
\n const y = ref(0)<\/p>\n
function handleMousemove(e) {
\n x.value = e.clientX
\n y.value = e.clientY
\n }<\/p>\n
onMounted(() => {
\n window.addEventListener('mousemove', handleMousemove)
\n })<\/p>\n
onUnmounted(() => {
\n window.removeEventListener('mousemove', handleMousemove)
\n })<\/p>\n
return { x, y }
\n}<\/p>\n
\/\/ \u5728\u7ec4\u4ef6\u4e2d\u4f7f\u7528Hook
\nconst { x, y } = useMouse()
\n<\/script><\/p>\n
Demo02<\/p>\n
<template>
\n <div>
\n <h3>useRequest \u5f02\u6b65\u8bf7\u6c42Hook<\/h3>
\n <button @click="run">\u53d1\u8d77\u8bf7\u6c42<\/button>
\n <button @click="retry" :disabled="!error">\u91cd\u8bd5<\/button>
\n <p v-if="loading">\u52a0\u8f7d\u4e2d…<\/p>
\n <p v-if="error" style="color:red">\u9519\u8bef：{{ error.message }}<\/p>
\n <p v-if="data">\u8fd4\u56de\u6570\u636e：{{ data }}<\/p>
\n <\/div>
\n<\/template><\/p>\n
<script setup>
\nimport { ref, onUnmounted } from 'vue'<\/p>\n
function useRequest(apiFn) {
\n const data = ref(null)
\n const loading = ref(false)
\n const error = ref(null)<\/p>\n
let abortController = null<\/p>\n
async function run() {
\n if (abortController) {
\n abortController.abort()
\n }
\n abortController = new AbortController()<\/p>\n
loading.value = true
\n error.value = null
\n try {
\n const res = await apiFn(abortController.signal)
\n data.value = res
\n } catch (err) {
\n if (err.name !== 'AbortError') {
\n error.value = err
\n }
\n } finally {
\n loading.value = false
\n }
\n }<\/p>\n
function retry() {
\n run()
\n }<\/p>\n
onUnmounted(() => {
\n if (abortController) {
\n abortController.abort()
\n }
\n })<\/p>\n
return {
\n data,
\n loading,
\n error,
\n run,
\n retry
\n }
\n}<\/p>\n
\/\/ \u6a21\u62df\u63a5\u53e3\u51fd\u6570
\nfunction mockApi(signal) {
\n return new Promise((resolve, reject) => {
\n const timer = setTimeout(() => {
\n resolve({ name: "\u5f20\u4e09", age: 20, id: 1001 })
\n }, 1500)<\/p>\n
signal.addEventListener('abort', () => {
\n clearTimeout(timer)
\n })
\n })
\n}<\/p>\n
\/\/ \u4f7f\u7528Hook
\nconst { data, loading, error, run, retry } = useRequest(mockApi)
\n<\/script><\/p>\n
\u6ce8\u610f
\n1 Hook\u5185\u7684\u751f\u547d\u5468\u671f，\u5f52\u5c5e\u8c03\u7528\u5b83\u7684\u7ec4\u4ef6；\u7ec4\u4ef6\u9500\u6bc1，Hook\u91cc\u9762\u7684onUnmounted\u81ea\u52a8\u6267\u884c
\n2 \u6bcf\u6b21\u7ec4\u4ef6\u8c03\u7528useXxx()\u90fd\u4f1a\u751f\u6210\u72ec\u7acb\u7684\u72b6\u6001\u526f\u672c(\u4e92\u4e0d\u5e72\u6270)；\u60f3\u8981\u5168\u5c40\u5171\u4eab\u72b6\u6001，\u9700\u8981\u5355\u72ec\u62bd\u79bb\u4e00\u4efdreactive\/ref\u653e\u5230Hook\u5916\u9762
\n3 \u526f\u4f5c\u7528（\u76d1\u542c\u3001\u5b9a\u65f6\u5668）\u4e00\u5b9a\u8981\u5728onUnmounted\u6e05\u7406，\u9632\u6b62\u5185\u5b58\u6cc4\u6f0f
\n4 \u5c3d\u91cf\u8fd4\u56deref\/toRefs，\u4fdd\u8bc1\u89e3\u6784\u51fa\u6765\u7684\u503c\u4fdd\u6301\u54cd\u5e94\u5f0f<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u4e00\u8282\u4e86\u89e3\u4e00\u4e0bVue3\u4e2d\u7684\u81ea\u5b9a\u4e49Hook,\u5b83\u4e5f\u53eb\u7ec4\u5408\u5f0f\u51fd\u6570，\u672c\u8d28\u5c31\u662f\u62bd\u79bb\u51fa\u6765\u3001\u53ef\u590d\u7528\u7684setup\u903b\u8f91\u51fd\u6570，\u7ea6\u5b9a\u4ee5use\u5f00\u5934\u547d\u540d，\u7b80\u5355\u603b\u7ed3\u5982\u4e0b:\u81ea\u5b9a\u4e49Hook\u672c\u8eab\u4e0d\u662f API，\u4f46\u662f\u5185\u90e8\u4e00\u822c\u4f1a\u4f7f\u7528\u4e0b\u9762\u8fd9\u4e9bVue API：
\n1. ref：\u5b9a\u4e49\u57fa\u7840\u54cd\u5e94\u5f0f\u6570\u636e
\n2. reactive：\u5bf9\u8c61\u7c7b\u578b\u54cd\u5e94\u5f0f
\n3. computed：\u8ba1\u7b97\u5c5e\u6027
\n4. watch\/watchEffect&<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[868,87],"topic":[],"class_list":["post-117810","post","type-post","status-publish","format-standard","hentry","category-server","tag-868","tag-87"],"yoast_head":"\n