VUE3-自定义hook（12）

最新推荐文章于 2025-07-04 11:20:40 发布

原创

最新推荐文章于 2025-07-04 11:20:40 发布 · 715 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文探讨Vue3中自定义hook的实践，通过创建一个名为usePoint.js的hook，将其应用于components文件夹内的Demo.vue和Test.vue组件，实现了代码的模块化和复用，简化了组件内部逻辑。

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

本案例需要关闭语法检查。
hook的使用就是模块化的思想，我们可以将一些公共的方法封装为一个js文件，放入hooks文件夹，这样所有组件都可以调用这个js文件，从而使得组件内部简单明了。

文章目录

目录结构

App.vue

<template>
  <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
  <Demo v-if="isShowDemo"/>
  <hr>
  <Test/>
</template>

<script>
import {
    
    ref} from 'vue'
import Demo from './components/Demo'
import Test from './components/Test'

export default {
    
    
  name: 'App'