hook是什么统台?
搜索到的結(jié)果是這么描述的:
vue3中的hooks其實(shí)是函數(shù)的寫法绷杜,就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來荔棉,放到單獨(dú)的js文件中。
再簡單點(diǎn)的介紹:
將js部分抽離懈糯,為了復(fù)用,且容易維護(hù)
通過一個(gè)簡單的小功能单雾,我們更好的去認(rèn)識hook
點(diǎn)擊'增加'或者'減少'按鈕赚哗,改變數(shù)字
首先在src文件下創(chuàng)建hook文件夾她紫,再繼續(xù)創(chuàng)建hook的js文件
創(chuàng)建hook文件
// userComputed.js
import { reactive, ref } from "vue";
export default function () {
const num = ref(0)
const add = () => {
console.log('增加')
num.value++
}
const subtraction = () => {
num.value--
}
return {
num,
add,
subtraction
}
}
這是vue文件
<template>
<div class="navMenu">
<div style="margin-bottom: 100px">我是導(dǎo)航1的子級1</div>
<div class="num">數(shù)字:{{ num }}</div>
<div class="btn">
<el-button @click="add">增加</el-button>
<el-button @click="subtraction">減少</el-button>
</div>
</div>
</template>
<script setup>
import { reactive } from "vue";
import userComputed from "@/hooks/userComputed"; // 引入hook的js文件
const { num, add, subtraction } = userComputed();
</script>