foreword

When learning Es6, we started to use classes and objects, and started modular management; in Vue, we can use mixin for modular management; in Vue3, there is also modular management, which requires the use of hook functions.

This section of the blog will explain the hook function in Vue3. In the explanation, the pitfalls encountered in the use of hooks and the things that need attention will be interspersed. (yellow part)

1. What is a hook

The essence of hook is a function that encapsulates the composition API used in the setup function, similar to mixin in Vue2.

Second, the use of the hook function

2.1 Bedding

Let's write a very simple code first:

<template>
  <div>我是App组件</div>
  <div>sum的值为{
    
    {
    
     sum }}</div>
  <button @click="add">点击sum的值加1</button>
</template>

<script>
import {
    
    ref} from 'vue'
export default {
    
    
    name: 'App',
    setup() {
    
    
        let sum = ref(0)
        function add() {
    
    
            sum.value ++
        }

        return {
    
    sum, add}
    }
}
</script>

<style>

</style>

The above code simply defines a sum with ref, and sets a button. If clicked, the sum value can be increased by one.
insert image description here
If now, there are five components that need to implement similar functions, I would like to ask everyone, should I copy and paste this code five times?

In fact, it is not necessary. Readers who understand modular management can guess that it can also be implemented in Vue3. The code is only written once, and the function that can be reused when needed is the hook function.

And look at the explanation of the hook function.

2.2 How to write the hook function

It's very simple. First, we create a folder named hooks, and create a js file inside. The name of the js file can be selected according to the function:
insert image description here
paste the part about sum we just wrote into this js file:

Next, we put these contents into a function and expose them, pay attention to:ref needs to be quoted before it can be used, and it still needs to be introduced in the js file.
insert image description here

Don't forget to return what you need:
insert image description here

Above, the file has been written.

2.3 Use the written hook function

Next we will use the addSum module we just wrote in App.vue.

There are three steps in total: reference, receive, and expose.

First, quote: import in the App.vue component:
insert image description here
Second, receive, it is particularly error-prone here! !
Here I need to emphasize a few points:First of all, the thing defined after let cannot have the same name as addSum. This is a big pit and an error will be reported. Secondly, it is best to deconstruct it as I do below. Otherwise, when you use it, you can only get one value like other cases.
insert image description here
Finally, don't forget to return the sum and add we received.

postscript

It took me a long time to solve the problems encountered in this blog. If you have any questions, you can post them in the comment area.

Welcome to pay attention and look forward to bringing you better articles.

The use of hooks in Vue3 and the pits encountered in use

Table of contents