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
    }
}
相关推荐
zhu128930355614 分钟前
用Rust和WebAssembly打造轻量级前端加密工具
前端·rust·wasm
@PHARAOH41 分钟前
WHAT - Electron 系列(一)
前端·javascript·electron
loriloy41 分钟前
Electron崩溃问题排查指南
javascript·electron
半句唐诗1 小时前
设计与实现高性能安全TOKEN系统
前端·网络·安全
小满zs1 小时前
React-router v7 第二章(路由模式)
前端·react.js
yanxy5121 小时前
【TS学习】(18)分发逆变推断
前端·学习·typescript
大莲芒2 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
前端·javascript·react.js
Hellyc2 小时前
SpringMVC响应数据:页面跳转与回写数据
java·前端·学习
CaveShao2 小时前
前端开发中常见的 SEO 优化
前端·seo
Hyyy2 小时前
ElementPlus按需加载 + 配置中文避坑(干掉1MB冗余代码)
前端·javascript·面试