09.Vue3的必背技能点（八）：组合式函数 与 vue2的Mixin ；

一、组合式函数

1、基本概念

• 利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数；

• 在多个组件中有复用相同的逻辑，我们可以把这个逻辑以一个组合式函数的形式提取到外部文件中；

• 一个组合式函数可以调用一个或多个其他的组合式函数，用多个较小且逻辑独立的单元来组合形成复杂的逻辑；

<!-- 在组件中使用：监听鼠标移动逻辑 -->
<script setup>
  import { ref, onMounted, onUnmounted } from 'vue'

  const x = ref(0)
  const y = ref(0)

  function update(event) {
     x.value = event.pageX
     y.value = event.pageY
  }

  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))

</script>

<template>Mouse position is at: {
  { x }}, {