vue3自定义hook

自定义hook

1.定义hook函数

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

• 类似于vue2.x中的mixin。

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

vue2中mixin使用

vue2-minxin官网：https://v2.cn.vuejs.org/v2/api/#mixins

定义：mixin的用处：主要用于多个组件内存在重复JS业务逻辑（可以包括methods，mounted，watch等等），将该JS部分代码封装在一个js文件下对外暴露，需要使用的组件进行引用。

基本使用步骤： 1.用一个js文件将vue的script部分抽离出来，如下示例（选项可以自由选择）

mixin.js文件

vue文件

2.案例

2.1自定义动态时间

2.1.1没有进行封装

<template>
  <div>
      <h3>
          {{ times }}
      </h3>
  
  </div>
</template>

<script lang="ts">
import { reactive,onMounted,onBeforeUnmount,ref } from 'vue'
export default {
  setup () {
    let times = ref(new Date())
    let id = null
    onMounted(()=>{
        id = setInterval(() => {
            times.value = new Date()
        }, 1000);
    })
    onBeforeUnmount(()=>{ 
        clearInterval(id)
    })
    return {
        times
    }
  }
}
</script>

<style scoped>

</style>

2.1.2进行封装

vue文件

<template>
  <div>
      <h3>
          {{ p.times }}
      </h3>
  
  </div>
</template>

<script lang="ts">
import { reactive,onMounted,onBeforeUnmount } from 'vue'
import useTimes from "./hooks/userPosition.js"
export default {
  setup () {
      const p = useTimes()        
      return {
          p         
      }
  }
}
</script>

<style scoped>

</style>

js文件

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

export default function(){
    let times = ref(new Date())
    let id = null
    onMounted(()=>{
        id = setInterval(() => {
            times.value = new Date()
        }, 1000);
    })
    onBeforeUnmount(()=>{ 
        clearInterval(id)
    })
    return {
        times
    }
}

2.2自定义点击当前鼠标的坐标

2.2.1没有进行封装

<template>
  <div>
    <h1>鼠标点击时的坐标:
      X: {{ state.x }}
      y: {{ state.y }}
 
    </h1>
  </div>
</template>

<script lang="ts">
import { reactive, onMounted, onBeforeUnmount} from 'vue'

export default {
  setup () {
    const state = reactive({
      x: 0,
      y: 0,
    })
    const fn = (e)=>{
      state.x  = e.pageX
      state.y = e.pageY
    }
    onMounted(()=>{
      addEventListener("click",fn)
    })
    onBeforeUnmount(()=>{
      removeEventListener(fn)
    })
    return {
      state
    }
  }
}
</script>

<style  scoped>

</style>

2.2.2进行封装

vue文件

<template>
  <div>
    <h1>鼠标点击时的坐标:
      X: {{ state.state.px }}
      Y: {{ state.state.py }}
    </h1>
  </div>
</template>

<script lang="ts">
import { reactive, onMounted, onBeforeUnmount} from 'vue'
import userstate from "./hooks/usePasition.js"
export default {
  setup () {
    // const state = reactive({
    //   x: 0,
    //   y: 0,
    // })
    // const fn = (e)=>{
    //   state.x  = e.pageX
    //   state.y = e.pageY
    // }
    // onMounted(()=>{
    //   addEventListener("click",fn)
    // })
    // onBeforeUnmount(()=>{
    //   removeEventListener(fn)
    // })
    const state = userstate()
    return {
      state
    }
  }
}
</script>

<style scoped>

</style>

js文件

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

export default function(){
    const state= reactive({
        px:0,
        py:0
    })
    const fn = (e)=>{
        state.px =e.pageX 
        state.py =e.pageY 
    }
    onMounted(()=>{
        addEventListener("click",fn)
    })
    onBeforeUnmount(()=>{
        removeEventListener(fn)
    })
    return {
        state
    }
}