Vue 3 解锁Hooks

在Vue2时，我们通常使用Options API来定义组件。而Vue 3的Hooks则采用了类似于React的函数式编程模型。使用Hooks，你可以在函数式组件中引入状态、计算属性、方法等功能，从而实现更灵活和可维护的代码结构。

一、hooks和mixin的区别

hooks

• Hooks是Vue 3中引入的特性，用于函数式组件。
• Hooks提供了一种更简洁和可重用的方式来处理组件的状态和逻辑。
• Hooks通过将相关的代码逻辑封装到可复用的函数中，使得代码更易于阅读、理解和维护。
• Hooks在组件内部使用，可以让你在不使用类组件的情况下实现相似的功能。

mixin

• mixin是Vue 2中的特性，用于对象式组件。
• mixin允许开发人员将一些通用的功能和逻辑混入多个组件中。
• mixin通过将公共代码注入到组件中，使得代码可以在多个组件之间共享和重用。
• mixin使用对象的形式定义，并利用Vue的混入机制将其应用到组件中。
• mixin的使用可能会导致命名冲突和代码耦合问题，因此需要小心使用以避免潜在的问题。

区别

• 语法：Hooks是函数式组件的特性，使用函数和特定的Hooks函数创建组件；Mixin是对象式组件的特性，使用对象进行定义和混入。
• 命名冲突：Hooks避免了命名冲突问题，因为每个函数式组件都是独立的；Mixin使用时需要小心命名，以避免冲突。
• 组件作用域：Hooks在组件内部定义和使用，不会影响其他组件；Mixin可以影响到混入的所有组件，可能导致难以追踪和调试的问题。

二、hooks和组件的执行顺序

谁先创建谁先执行

//hook/index.ts
import { onMounted } from "vue";
export const useAdd = () => {
  onMounted(() => {
    console.log("hooks的onMounted");
  });

  return "hello word";
};


//APP.vue
<template>{{ a }}</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { useAdd } from "@/hooks/index";

onMounted(() => {
  console.log("组件的onMounted");
});
const a = useAdd();
</script>

<style scoped lang="scss"></style>

若调用的hook放在组件生命周期之后，执行结果为：

若调用的hook放在组件生命周期之前，执行结果为：

三、简单计时器实现

//hook/index.ts
import { ref } from "vue";
export const useComputed = () => {
  const num = ref(0);
  const add = () => {
    num.value++;
  };
  const subtraction = () => {
    num.value--;
  };
  return {
    num,
    add,
    subtraction,
  };
};


//APP.vue
<template>
  <button @click="add">增加</button>
  <button @click="subtraction">减少</button>
  <span>{{ num }}</span>
</template>
<script setup lang="ts">
import { useComputed } from "@/hooks/index";
const { add, subtraction, num } = useComputed();
</script>

<style scoped lang="scss"></style>

四、总结

Vue 3的Hooks为我们带来了更加灵活和可维护的代码结构。通过使用ref、computed、watchEffect等内置的Hooks函数，以及自定义自己的Hooks函数，我们可以更好地处理组件的状态和逻辑，并使得代码更易于阅读和维护。