hook函数

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

• 类似于vue2.x中的mixin。

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

 

正常的模式 : 

<template>
    <div>
        得到鼠标坐标 x : {{pagex}}
        得到鼠标坐标 y : {{pagey}}
    </div>
</template>

<script>
    import {onMounted,reactive,toRefs}    from 'vue'
    export default {
        name: 'App',
        setup() {
      let page = reactive({
        pagex:'',
        pagey:''
      })
            onMounted(() => {
                window.addEventListener('click',(event)=>{
          page.pagex = event.pageX
          page.pagey = event.pageY
                })
            })
      return {...toRefs(page)}
        }
    }
</script>

 

变成hook模式 :  [ JS 使用默认暴露,引入js的话,取什么名字都行]

hook.js

import {onMounted,reactive,onBeforeUnmount}    from 'vue'
export default function(){
    // 数据
    let page = reactive({
        pagex:'',
        pagey:''
    })

    // 方法
    let data = (event)=>{
        page.pagex = event.pageX
        page.pagey = event.pageY
    }

    // 组合式API
    onMounted(() => {
        window.addEventListener('click',data)
    })

    // 组合式API
    onBeforeUnmount(() => {
        window.removeEventListener('click',data)
    })

    return page
}

使用 : 

<template>
    <div>
        得到鼠标坐标 x : {{pagex}}
        得到鼠标坐标 y : {{pagey}}
    </div>
</template>

<script>
  import suiyi from '../hooks/usePage'
    import {toRefs}    from 'vue'
    export default {
        name: 'App',
        setup() {
      　　　let page = suiyi()
      　　　return {...toRefs(page)}
        }
    }
</script>