vue3组合式函数的理解和使用

什么是组合式函数？

组合式函数就是函数中使用组合式api，然后再到组合式api的setup入口函数中使用。它是对组合式api的一些封装和复用。

定义组合式函数

举例说明，假设有很多地方都会获取鼠标指针坐标的时候，一般我们首先会想到封装一个函数，然后多个地方调用它就是了。

// demo.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useDemo() {
  // 被组合式函数封装和管理的状态
  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))

  // 通过返回值暴露所管理的状态
  return { x, y }
}

在组件中使用

<script setup>
import { useDemo } from './demo.js'
const { x, y } = useDemo()
</script>

<template>鼠标指针当前位置: {{ x }}, {{ y }}</template>

在选项式api中使用组合式函数

<template>鼠标指针当前位置: {{ x }}, {{ y }}</template>

<script>
export default {
    data(){},
    setup(){
        const {x ,y} = useDemo()
        return {x,y}
    },
    methods:{}
}
</script>

效果图

组合式函数鼠标坐标示例图