Vue3快速上手（十四）Hooks用法和真正的Composition组合式API

最新推荐文章于 2025-07-03 08:54:20 发布

原创最新推荐文章于 2025-07-03 08:54:20 发布 · 1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #hooks #vue3 #composition #组合式API

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了Vue3中的CompositionHooks，通过示例对比了不使用Hooks和使用Hooks实现两个功能（计算和修改个人信息）的差异，强调了Hooks在模块化和可维护性方面的优势，特别是在处理大量功能时的便捷性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
前面对基本语法进行过简单介绍：
Vue3快速上手（三）Composition组合式API及setup用法

一、Hooks介绍

Hooks，顾名思义，挂钩;钩子的意思。在Vue3里，通过hooks，将不同的功能的数据，方法，计算属性，生命周期函数等，所有和该功能有关联的内容，封装到一个函数中。只需要在使用该功能的地方直接引入即可。多个功能，多个Hooks。这样实际就组成了Vue3中真正的Composition组合式API。

二、示例

我们定义2个功能：（只为演示说明）用不同实现，看下效果。
功能1：计算2个数字的和。
功能2：修改个人信息

2.1 不用hooks实现

<template>
    <div class="person">
        <h2>加法</h2>
        <h3>A：<input type="text" v-model="a" /></h3>
        <h3>B：<input type="text" v-model="b" /></h3>
        <h2>{{ sum }}</h2>
        <br><hr><br>
        <h2>人员信息</h2>
        <h3>姓名：{{ person.name }}</h3>
        <h3>年龄：{{ person.age }}</h3>
        <button @click="updatePersonAge">修改年龄</button>
    </div>
</template>
<script lang='ts' setup name="Hooks">
import { computed, reactive, ref } from 'vue'
let a = ref(1)
let b = ref(2)

let person = reactive(
    {
        name: "李四",
        age: 99,
    }
)

let sum = computed({
    get() {
        return Number(a.value) + Number(b.value)
    },
    set(val) {
        console.log('setter-val: ', val);
        let [one, two] = (val + '').split('')
        a.value = Number(one)
        b.value = Number(two)
    }
})

function resetSum() {
    sum.value = 12
}

function updatePersonAge() {
    person.age += 1
}

</script>

实现效果如下：A,B变化求和正常；点击修改年龄正常变化。
在这里插入图片描述
但是2个功能是这样子，那么多个功能呢？假设有100个功能，那每个功能的数据、方法、计算属性都放到一起，那有需求变化时，简直就是噩梦。这就需要用到开头说的hooks来进行封装了。

2.2 使用hooks实现

首先呢，需要新建hooks文件，文件的命名规范是use开头功能结尾，比如我们这个就可以写成useSum和usePerson，如下，新建hooks目录和文件。
在这里插入图片描述
sum功能useSum.ts代码如下：

import { computed, reactive, ref } from 'vue'

export default function () {
    let a = ref(1)
    let b = ref(2)

    let sum = computed({
        get() {
            return Number(a.value) + Number(b.value)
        },
        set(val) {
            console.log('setter-val: ', val);
            let [one, two] = (val + '').split('')
            a.value = Number(one)
            b.value = Number(two)
        }
    })

    function resetSum() {
        sum.value = 12
    }
    return { a, b, sum }
}

修改用户功能usePerson.ts代码如下：

import { computed, reactive, ref } from 'vue'

export default function () {
    let person = reactive(
        {
            name: "李四",
            age: 99,
        }
    )

    function updatePersonAge() {
        person.age += 1
    }
    return {person, updatePersonAge}
}

主文件内容如下：

<template>
    <div class="person">
        <h2>加法</h2>
        <h3>A：<input type="text" v-model="a" /></h3>
        <h3>B：<input type="text" v-model="b" /></h3>
        <h2>{{ sum }}</h2>
        <br>
        <hr><br>
        <h2>人员信息</h2>
        <h3>姓名：{{ person.name }}</h3>
        <h3>年龄：{{ person.age }}</h3>
        <button @click="updatePersonAge">修改年龄</button>
    </div>
</template>
<script lang='ts' setup name="Hooks">
import usePerson from '@/hooks/userPerson'
import useSum from '@/hooks/useSum'

let { a, b, sum } = useSum()
let { person, updatePersonAge } = usePerson()
</script>