Vue 3 Hooks 教程

Vue 3 Hooks 教程

1. 什么是 Hooks?

在 Vue 3 中,Hooks 是一种组织和复用组件逻辑的强大方式。它们允许您将组件的状态逻辑提取到可重用的函数中,从而简化代码并提高代码的可维护性。

2. 基本 Hooks 介绍

2.1 refreactive

这两个函数是响应式数据的基础:

typescript 复制代码
import { ref, reactive } from 'vue'

// ref 用于基本类型
const count = ref(0)

// reactive 用于对象
const state = reactive({
  name: '张三',
  age: 25
})

2.2 computed

计算属性 Hook,用于基于其他响应式数据创建衍生状态:

typescript 复制代码
import { ref, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

3. 生命周期 Hooks

Vue 3 提供了多个生命周期相关的 Hooks:

typescript 复制代码
import { onMounted, onUpdated, onUnmounted } from 'vue'

export function useLifecycleDemo() {
  onMounted(() => {
    console.log('组件已挂载')
  })

  onUpdated(() => {
    console.log('组件已更新')
  })

  onUnmounted(() => {
    console.log('组件即将卸载')
  })
}

4. 自定义 Hooks

4.1 创建可复用的状态逻辑

typescript 复制代码
// useCounter.ts
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  const isPositive = computed(() => count.value > 0)

  return {
    count,
    increment,
    decrement,
    isPositive
  }
}

4.2 异步 Hooks

typescript 复制代码
// useFetch.ts
import { ref, computed } from 'vue'

export function useFetch(url: string) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  async function fetchData() {
    try {
      const response = await fetch(url)
      data.value = await response.json()
      loading.value = false
    } catch (err) {
      error.value = err
      loading.value = false
    }
  }

  fetchData()

  return {
    data,
    error,
    loading
  }
}

5. Hooks 最佳实践

  1. 保持 Hooks 简单:每个 Hook 应该专注于单一功能。
  2. 命名约定 :以 use 开头,如 useCounteruseFetch
  3. 避免副作用:尽量保持 Hooks 的纯净性。
  4. 错误处理:在 Hooks 中添加适当的错误处理机制。

6. 常见 Hooks 示例

6.1 本地存储 Hook

typescript 复制代码
import { ref, watch } from 'vue'

export function useLocalStorage(key: string, initialValue: any) {
  const storedValue = localStorage.getItem(key)
  const value = ref(storedValue ? JSON.parse(storedValue) : initialValue)

  watch(value, (newValue) => {
    localStorage.setItem(key, JSON.stringify(newValue))
  }, { deep: true })

  return value
}

6.2 鼠标位置 Hook

typescript 复制代码
import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  function update(event: MouseEvent) {
    x.value = event.pageX
    y.value = event.pageY
  }

  onMounted(() => {
    window.addEventListener('mousemove', update)
  })

  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })

  return { x, y }
}

7. 结论

Vue 3 的 Hooks 为组件逻辑复用提供了一种强大而灵活的方式。通过合理使用 Hooks,您可以编写更加模块化、可读和可维护的代码。

相关推荐
Hexene...10 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情10 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
华子w90892585910 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端
前端小趴菜0512 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
P7Dreamer13 小时前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
I'm写代码13 小时前
el-tree树形结构笔记
javascript·vue.js·笔记
斯~内克13 小时前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
sunbyte14 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
markyankee10114 小时前
Vue 计算属性和侦听器详解
vue.js
盏茶作酒2915 小时前
打造自己的组件库(一)宏函数解析
前端·vue.js