Vue3自定义hooks

Hooks解决了什么

虽然vue3文档没有直接提hooks，但经过我的一番学习后发现，发现大佬们都习惯性使用hooks，来降低代码的耦合度。特别是在开发复杂页面及涉及的逻辑很复杂时，那代码读起来就费劲了。从之完成功能到追求代码可读性、性能的提高，这不是代表我离大佬又近了一小步。

Vue 3 的 组合式API 中引入了函数(hooks)，主要解决了以下一些问题：

1. 逻辑复用： Composition API 提供了更灵活的方式来组织和复用组件逻辑。以前在 Vue 2 中，逻辑复用主要通过 mixin 和高阶组件来实现，但这些方法有时会导致命名冲突、难以理解的代码和组件逻辑分散的问题。Composition API 的函数允许更自由地组合和复用逻辑。

2. 组织代码： Composition API 允许按功能组织代码，而不再被限制在 data、methods、computed 等选项内。这样做使得组织代码更加自然，能够更清晰地表示组件的结构和逻辑。

3. 更好的类型支持： 使用 Composition API 时，你可以更精确地定义组件的类型。这对于使用 TypeScript 的项目特别有用，因为 Composition API 提供了更好的类型推断支持。

4. 更灵活的生命周期管理： Composition API 提供了 setup 函数，代替了 Vue 2 中的 data、methods 等选项，同时提供了更细粒度的生命周期钩子。这使得开发者可以更精确地控制组件的初始化和销毁过程。

5. 响应式能力： Composition API 提供了一组新的函数，如 ref、reactive、watch 等，使得响应式能力更加灵活。新的响应式系统还解决了 Vue 2 中一些响应式系统的限制和问题。

使用

在 Vue 3 中，自定义 Hooks 是通过 Composition API 实现的，它们是一组函数，用于封装可重用的逻辑。通过自定义 Hooks，你可以将组件的逻辑抽象成可复用的功能，并在需要的地方进行引用。

自定义 Hooks 的一般结构如下：

// useCustomHook.js
import { ref, computed, watch } from 'vue';

export function useCustomHook(initialValue) {
  // 在这里定义逻辑
  const data = ref(initialValue);
  
  const doubleData = computed(() => data.value * 2);

  watch(data, (newValue, oldValue) => {
    // 在这里处理数据变化的逻辑
    console.log('Data changed:', newValue, oldValue);
  });

  // 返回需要暴露的接口
  return {
    data,
    doubleData,
    // 其他函数或数据...
  };
}

然后，你可以在组件中使用自定义 Hook：

// MyComponent.vue
<script>
import { useCustomHook } from './useCustomHook.js';

export default {
  setup() {
    const { data, doubleData } = useCustomHook(42);

    // 在组件中使用自定义 Hook 提供的数据和功能
    // ...

    return {
      data,
      doubleData,
      // 其他返回的数据或函数...
    };
  },
};
</script>

通过这种方式，你可以将逻辑从组件中提取出来，实现逻辑的复用和组件的解耦。这样的做法使得代码更易于测试、维护，并提高了代码的可读性。自定义 Hooks 的设计遵循 Composition API 的思想，使得 Vue 3 中的组件逻辑更加灵活和可复用。

Vue2之mixin

在 Vue 2 中，组件的逻辑复用主要通过 mixin 来实现。Mixin 是一种将可复用功能组合到组件中的方式，可以包含组件选项、生命周期钩子、方法等。通过 mixin，你可以在多个组件之间共享相同的逻辑。

以下是一个使用 mixin 的简单示例：

// mixin.js
export const myMixin = {
  data() {
    return {
      mixinData: 'Hello from mixin',
    };
  },
  methods: {
    mixinMethod() {
      console.log('Mixin method');
    },
  },
  created() {
    console.log('Mixin created hook');
  },
};

// 使用 mixin 的组件
// MyComponent.vue
<script>
import { myMixin } from './mixin.js';

export default {
  mixins: [myMixin],
  data() {
    return {
      componentData: 'Hello from component',
    };
  },
  created() {
    console.log('Component created hook');
  },
};
</script>

在上面的例子中，myMixin 包含了一些数据、方法以及生命周期钩子。然后，MyComponent 组件通过 mixins 选项引入了这个 mixin，并继承了 mixin 中定义的内容。

尽管 mixin 提供了一种在组件之间共享逻辑的方式，但也存在一些问题，比如命名冲突、难以理解的代码和不可预测的组件状态。Composition API 和 Vue 3 中引入的函数式 API（hooks）更灵活、更直观，能够更好地解决这些问题。