自定义hook

自定义hook函数

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

• 类似于vue2.x中的mixin。

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

main.js

//引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数

import { createApp } from 'vue'

import App from './App.vue'

//创建应用实例对象——app(类似于之前Vue2中的vm，但app比vm更“轻”)

const app = createApp(App)

//挂载

app.mount('#app')

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',

        components:{Demo,Test},

        setup() {

            let isShowDemo = ref(true)

            return {isShowDemo}

        }

    }

</script>

 

hooks\usePoint.js

import {reactive,onMounted,onBeforeUnmount} from 'vue'

export default function (){

    //实现鼠标“打点”相关的数据

    let point = reactive({

        x:0,

        y:0

    })

    //实现鼠标“打点”相关的方法

    function savePoint(event){

        point.x = event.pageX

        point.y = event.pageY

        console.log(event.pageX,event.pageY)

    }

    //实现鼠标“打点”相关的生命周期钩子

    onMounted(()=>{

        window.addEventListener('click',savePoint)

    })

    onBeforeUnmount(()=>{

        window.removeEventListener('click',savePoint)

    })

    return point

}

components\Test.vue

<template>

    <h2>我是Test组件</h2>

    <h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>

</template>

<script>

    import usePoint from '../hooks/usePoint'

    export default {

        name:'Test',

        setup(){

            const point = usePoint()

            return {point}

        }

    }

</script>

components\Demo.vue

<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>