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]。