vue3.0 自定义hook

自定义hook函数

• 什么是hook?——本质是一个函数，把setup函数中使用的Composition API进行了封装。。类似于vue2.x中的mixin。
• 自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。

文件目录：

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'
export default {
    name:'Demo',
    setup(){
        //数据
        let sum = ref(0)
        
        //返回一个对象（常用）
        return { sum }
    }
}
</script>

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>

usePoint代码：

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

}

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>

效果：