vue3：23—自定义hooks

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

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

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

如何定义hooks

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

图片示例

代码示例：

person.vue

<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

import {onMounted, ref} from 'vue'

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

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

useSum.ts

import {ref} from 'vue'
export default function(){
    const sum = ref(0)
    function add(){
        sum.value+=1
    }
    return {
        sum,
        add
    }
}

原文地址:https://blog.csdn.net/qq_37899792/article/details/136013916

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_65603.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。