vue3学习-3（逻辑复用）

1.开始

2.基础

3.深入组件

4. 逻辑复用

1. 组合式函数

鼠标跟踪器

• 在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

• 鼠标跟踪器示例，直接使用组合式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 }}, {
      { y }}</template>
  

• 组合式函数的形式提取到外部文件使用

  // mouse.js
  import {
        ref, onMounted, onUnmounted } from 'vue'
  
  // 按照惯例，组合式函数名以“use”开头
  export function useMouse() {
       
    // 被组合式函数封装和管理的状态
    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 { useMouse } from './mouse.js'
  
  const { x, y } = useMouse()
  </script>
  
  <template>Mouse position is at: {
      { x }}, {
      { y }}</template>
  

  例如还可以继续封装

  // event.js
  import {
        onMounted, onUnmounted } from 'vue'
  
  export function useEventListener(target, event, callback) {
       
    // 如果你想的话，
    // 也可以用字符串形式的 CSS 选择器来寻找目标 DOM 元素
    onMounted(