vue3:23—自定义hooks

正是因为有了hooks,组合式才发挥出了威力

其实 hooks 和 vue2 中的 mixin 有点类似,但是相对 mixins 而言, hooks 更清楚复用功能代码的来源, 更清晰易懂。

如何定义hooks

  1. 具备可复用功能,才需要抽离为 hooks 独立文件
  2. 函数名/文件名以 use 开头,形如: useXX
  3. 引用时将响应式变量或者方法显式解构暴露出来;

图片示例

代码示例:

person.vue

html 复制代码
<script lang="ts" setup>
import useSum from '@/hooks/useSum'
import useDog from '@/hooks/useDog'
const { sum, add } = useSum
const { dogList, getDogList } = useDog
</script>

<template>
  <h2>当前求和为:{{ sum }}</h2>
  <button @click="add">点我sum+1</button>
  <button @click="getDogList">找狗</button>
  <ul>
    <li v-for="item in dogList" :key="item">
      {{ item }}
    </li>
  </ul>
</template>

<style lang="scss" scoped></style>

useDog.ts

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

export default function(){
    const dogList = ref([

    ])
    function getDogList(){
        dogList.value.push()
    }
    onMounted(()=>{
        getDogList()
    })
    //向外部提供东西
    return {
        dogList,
        getDogList
    }
}

useSum.ts

javascript 复制代码
import {ref} from 'vue'
export default function(){
    const sum = ref(0)
    function add(){
        sum.value+=1
    }
    return {
        sum,
        add
    }
}
相关推荐
岁月宁静5 分钟前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能
小小弯_Shelby10 分钟前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
IT_陈寒12 分钟前
SpringBoot性能飞跃:5个关键优化让你的应用吞吐量提升300%
前端·人工智能·后端
加洛斯1 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
kunge1v51 小时前
学习爬虫第三天:数据提取
前端·爬虫·python·学习
可爱的秋秋啊1 小时前
简单网站编写
开发语言·前端
Keepreal4961 小时前
Electron基本概念
前端·javascript·electron
zhaoolee2 小时前
Claude Code使用指北(如何白嫖百万Qwen3 Token,每月劲省20刀)
前端
前台端水工程师2 小时前
vite-plugin-mock插件的3.0.2版本在生产环境无法使用
前端
戈卬2 小时前
VSCode 中 Prettier 工作原理与使用指南
前端