Vue3-10-自定义hook

Vue3-10-自定义hook

文章目录

  • Vue3-10-自定义hook

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

  • 类似于vue2.x中的mixin。

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

<template>
 <h2>当前求和为:{{sum}}h2>
 <button @click="sum++">点我+1button>
 <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>
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
}

你可能感兴趣的:(Vue3笔记,vue.js,javascript,前端)