什么是hook？

• 是一个函数，把  setup 函数中使用的 Component API 抽离出来进行封装复用

<template>
  <div>{{sum}}</div>
  <button @click="sum++">自增</button>
  <div>坐标 {{point.x}} ---- {{point.y}}</div>
</template>

<script>
import {ref, reactive, onMounted, onBeforeUnmount, } from 'vue'
export default {
  name: 'Demo',
  setup() {
    let sum = ref(1)
    let point = reactive({
      x: 0,
      y: 0
    })
    // 用于保存坐标信息
    function savePoint(event) {
      console.log(event.pageX, event.pageY);
      point.x = event.pageX
      point.y = event.pageY
    }
    onMounted(() => { // 组件挂载完毕后立即执行该生命周期钩子函数
      window.addEventListener('click', savePoint)
    })
    onBeforeUnmount(() => { // 组件即将被卸载时 执行该生命周期钩子函数
      window.removeEventListener('click', savePoint)
    })
    return {
      sum,
      point,
    }
  },
}
</script>

• 希望使用 hook 将保存坐标的代码抽离出来

<template>
  <div>{{sum}}</div>
  <button @click="sum++">自增</button>
  <div>坐标 {{point.x}} ---- {{point.y}}</div>
</template>

<script>
import {ref, } from 'vue'
import usePoint from "../hooks/usePoint";
export default {
  name: 'Demo',
  setup() {
    let sum = ref(1)
    let point = usePoint() // usePoint是封装的一个 hook
    return {
      sum,
      point,
    }
  },
}
</script>

• 该组件使用了  /src/hooks/usePoint.js 暴露的 hook

import {onBeforeUnmount, onMounted, reactive} from "vue";

export default function() {
  // 坐标数据
  let point = reactive({
    x: 0,
    y: 0
  })
  // 用于保存坐标信息的函数
  function savePoint(event) {
    console.log(event.pageX, event.pageY);
    point.x = event.pageX
    point.y = event.pageY
  }
  onMounted(() => { // 组件挂载完毕后立即执行该生命周期钩子函数
    window.addEventListener('click', savePoint)
  })
  onBeforeUnmount(() => { // 组件即将被卸载时 执行该生命周期钩子函数
    window.removeEventListener('click', savePoint)
  })

  // 暴露数据给外部使用
  return point
}

• 通过 hook 可以将 Component API 中的功能抽离出来用于复用