hook函数

2022-05-20 11:31:53 阅读：160 来源： 互联网

标签：函数 onMounted page hook pagex pagey event

什么是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>

标签：函数,onMounted,page,hook,pagex,pagey,event
来源： https://www.cnblogs.com/qd-lbxx/p/16291727.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

hook函数