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
    }
}
相关推荐
大飞记Python1 天前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep1 天前
【前端】前端运行环境的结构
前端
你的人类朋友1 天前
【Node】认识multer库
前端·javascript·后端
Aitter1 天前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front1 天前
面试问题—上家公司的离职原因
前端·面试
昔人'1 天前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'1 天前
css `dorp-shadow`
前端·css
流***陌1 天前
扭蛋机 Roll 福利房小程序前端功能设计:融合趣味互动与福利适配
前端·小程序
可触的未来,发芽的智生1 天前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
烛阴1 天前
用 Python 揭秘 IP 地址背后的地理位置和信息
前端·python