Vue3 组合式函数

组合式函数

组合式函数（Composables）是 Vue3 中的一种新的编程模式, 它允许我们以更简洁、可重用的方式编写组件逻辑; 组合式函数是基于Vue3的新API, 包括ref、reactive、computed等, 这些函数可以帮助我们更好地组织和管理组件的状态和逻辑;

组合式函数的优势

组合式函数的优势在于它们可以更方便地共享和重用组件逻辑; 通过将逻辑封装在组合式函数中, 我们可以将它们作为独立的单元进行复用, 并在多个组件中使用; 此外, 组合式函数还可以简化组件的代码结构, 使得组件更加简洁和易于维护;

如何使用组合式函数？

Vue3的组合式函数主要通过两个新的API来实现：setup()函数和reactive()函数;

首先, 让我们来看看setup()函数; 在Vue3中, setup()函数是在组件实例创建之前被调用的; 它接收两个参数：props和context; props是组件接收的属性, context包含了一些常用的属性和方法;

在setup()函数中, 我们可以定义需要共享的响应式数据、计算属性、方法等; 这些数据和方法可以在模板中使用, 或者通过返回值暴露给其他组件使用;

案例一 useCounter

接下来, 让我们看看如何创建一个组合式函数; 通常, 我们会将相关的逻辑组织到一个单独的函数中, 并在setup()函数中调用该函数;

import { reactive } from 'vue';

function useCounter() {
  const state = reactive({
    count: 0,
    increment() {
      state.count++;
    },
    decrement() {
      state.count--;
    }
  });

  return state;
}

export default {
  setup() {
    // 调用组合式函数
    const counter = useCounter();

    return {
      counter
    };
  }
}

在上面的例子中, 我们创建了一个名为useCounter的组合式函数; 它返回一个包含计数器count和递增递减方法的响应式对象state; 在setup()函数中调用useCounter函数并将返回值作为返回对象的属性, 以便在模板中使用;

此外, Vue3还提供了许多内置的组合式函数, 例如onMounted()、watch()、onUnmounted()等, 用于处理生命周期钩子和侦听副作用;

案例二 useMousePosition

import { reactive, onMounted, onUnmounted } from 'vue';

function useMousePosition() {
  const position = reactive({
    x: 0,
    y: 0
  });

  function updatePosition(e) {
    position.x = e.pageX;
    position.y = e.pageY;
  }

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition);
  });

  return position;
}

export default {
  setup() {
    const mousePosition = useMousePosition();

    return {
      mousePosition
    };
  }
}

在上面的例子中, 我们创建了一个名为 useMousePosition 的组合式函数, 用于获取鼠标的位置; 在 setup 函数中调用 useMousePosition 函数, 并将鼠标位置作为返回对象的属性, 以便在模板中使用; 同时, 我们使用了 onMounted 和 onUnmounted 来分别在组件挂载和卸载时添加/移除鼠标移动事件监听器;

总结一下, Vue3 的组合式函数是利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数; 我们可以使用setup()函数和reactive()函数创建自定义的组合式函数, 并利用内置的组合式函数来处理常见的逻辑需求; 通过组合式函数, 我们能够更好地组织和管理Vue应用的逻辑代码, 提高代码的可读性和复用性;