自定义hook函数

• 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。

• 类似于vue2.x中的mixin。

• 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

 

创建hook3文件夹

新建usePoint.js文件（文件名以userxxx命名）

 

app.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<template>   <button @click="isShow = !isShow">展示/隐藏</button>   <Demo4 v-if="isShow"></Demo4> </template>   <script>   import Demo4 from './components/Demo4' import {ref} from 'vue'   export default {   name: 'App',   components:{     Demo4   },   setup() {     let isShow = ref(true)       return {isShow}   }    } </script>   <style>   </style>

　　

Deme4.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<template>   <h2>当前求和为：{{sum}}</h2>   <button @click="sum++">点我+1</button>   <hr>   <h2>当前点击时鼠标的坐标为：x - {{point.x}}，y - {{point.y}}</h2> </template>   <script> import {ref} from 'vue' import usePoint from '../hooks/usePoint';   export default {   name: 'Demo',   setup() {     let sum = ref(0)           let point = usePoint()       //返回一个对象     return{sum,point}     }    } </script>   <style>   </style>