vue3 组合式函数

Vue 3中引入了一种新的组织代码的方式，即组合式函数。组合式函数是一种将逻辑相关的代码组织在一起的方式，以提高代码的可读性和可维护性。它通过将相关的逻辑封装在一个函数中，并将该函数作为一个可复用的组合式函数提供给组件使用。

在Vue 3中，组合式函数使用`setup`函数来定义。`setup`函数是在组件实例创建之前执行的，它接收两个参数：`props`和`context`。`props`是组件的属性，可以在`setup`函数中直接使用；`context`是一个包含了一些实用方法和属性的对象，例如`attrs`、`emit`等。

组合式函数可以使用Vue提供的一些API来实现不同的功能，例如：
1. `reactive`：用于创建响应式数据。
2. `computed`：用于创建计算属性。
3. `watch`：用于监听数据的变化。
4. `ref`：用于创建一个包装对象，使其可以被响应式地访问。
5. `toRefs`：用于将响应式对象转换为普通对象，以便在模板中使用。

通过使用这些API，我们可以将相关的逻辑封装在一个组合式函数中，并在组件中使用。这样可以提高代码的可读性和可维护性，并且可以更好地复用逻辑。

相关问题

vue3 组合式函数 案例

### Vue3 Composition API 使用示例

#### 创建一个简单的计数器应用

为了更好地理解 Vue 3 中的 Composition API，这里提供了一个简单而完整的计数器应用程序实例。

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'CounterApp',
  setup() {
    // 定义可变状态变量 count
    const count = ref(0);

    // 提供增加和减少的方法
    function increment() {
      count.value++;
    }

    function decrement() {
      if (count.value > 0) {
        count.value--;
      }
    }

    // 返回模板所需的数据和方法
    return {
      count,
      increment,
      decrement
    };
  },
  template: `
    <div>
      <p>当前计数值：{{ count }}</p>
      <button @click="increment">+</button>
      <button @click="decrement" :disabled="count === 0">-</button>
    </div>`
});

此代码片段展示了如何利用 `ref` 函数创建响应式的属性，并通过返回的对象暴露给组件模板使用[^1]。

#### 组合多个自定义 Hooks 实现复杂功能

对于更复杂的场景，可以组合不同的 hooks 来构建逻辑单元。例如，在处理表单验证时：

// useValidation.js 文件内容如下：
import { computed, reactive } from 'vue';

function useValidation(initialValue, validatorFn) {
  const state = reactive({
    value: initialValue,
    error: ''
  });

  const validate = () => {
    const result = validatorFn(state.value);
    state.error = result ? '' : 'Invalid input';
  };

  return {
    ...toRefs(state),
    bind: {
      value: computed(() => state.value),
      onChange: e => {
        state.value = e.target.value;
        validate();
      }
    }
  };
}

export default useValidation;

// 在组件内部调用该 hook 并将其绑定到输入框上
setup() {
  import useValidation from './useValidation';

  const emailValidator = val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
  
  const emailField = useValidation('', emailValidator);

  return {
    emailField
  };
}

这段代码说明了怎样封装特定业务逻辑成独立的小型 Hook，并能在不同地方重复利用这些工具函数[^3]。

vue3组合式生命周期函数

在Vue3的组合式API中，生命周期函数的使用需要提前引入，除了beforeCreate和created之外，其他生命周期函数都需要引入。其中，errorCaptured被重命名为onErrorCaptured，每当事件处理程序或生命周期钩子抛出错误时调用。在setup函数中，可以使用onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onActivated、onDeactivated、onErrorCaptured等生命周期函数。这些生命周期函数的作用和选项API中的生命周期函数相同，但是它们的执行顺序略有不同。例如，在组件挂载之前，会先执行setup函数中的onBeforeMount函数，然后才会执行选项API中的beforeMount函数。总的来说，组合式API中的生命周期函数可以帮助我们更好地控制组件的生命周期，实现更加灵活的逻辑处理。