vue3中简单的hooks怎么写？

背景

vue3可以像react一样去封装hooks，但是我们习惯了vue2的同学可能在刚接触vue3的时候（没用过react的情况下），那肯定是对hooks不是那么了解的，那么我们应该怎么去学习了解hooks呢？说一个简单的例子。mixins；用过vue2的同学肯定是知道这个的？既然你知道这个那么对hooks就是有一定了解的。

mixins

我相信大家在看到以下示例代码，肯定都是比较熟悉的；或多或少都是知道的。

我们在js中封装了一下方法以后，可以在任意的vue文件中使用，一套代码重复使用。方便我们的维护和功能开发。

缺点：我们

示例封装代码：

JavaScript 复制代码

export default {
  data() {
    return {
      userCount: 0
    }
  },
  watch: {
  },
  beforeMount() {
  },
  beforeDestroy() {
  },
  mounted() {
  },
  methods: {
    incrementUserCount() {
      this.userCount++
    }
  }
}

缺点重点：

如果我们在使用页面声明了一个相同的变量，那么会优先使用当前页面的，灵活性较低，相对比较麻烦。
可追溯性弱，比如mixins: [userCount] 有很多很多个，那么你在使用变量的时候很难查询是哪一个mixins的，可维护性较低。

示例使用代码：

JavaScript 复制代码

<div> {{ userCount }} </div>

<script>
import userCount from './mixin/userCount'
export default {
  name: 'Layout',
  mixins: [userCount],
  data() {
    return {
      userCount: 3
    }
  },
}
</script>

hooks

为什么要用hooks：

结论：就是为了让Compoosition Api更好用更丰满，让写Vue3更畅快！像写诗一样写代码！其实这个问题更深意义是为什么Vue3比Vue2更好！无外呼性能大幅度提升，其实编码体验也是Vue3的优点Composition Api的引入（解决Option Api在代码量大的情况下的强耦合） 让开发者有更好的开发体验。
个人碎碎念：但是这些所谓的提高开发体验都是需要开发者不断学习养成编码好习惯，同样是Vue3写Compoosition Api有的人就能写得和诗一样，有的人却能写得像💩一样（衷心希望每个开发者都有一颗对技术热衷的心，不要为了开发而开发，前人写翔让后人尝！抱歉最近因为维护老项目太多感慨）

以下代码功能跟mixins封装的代码是一样的。

示例封装代码:

typescript 复制代码

import { ref } from 'vue';

export const useUserCount = () => {
  const userCount = ref(0);

  const incrementUserCount = () => {
    userCount.value++;
  };

  return {
    userCount,
    incrementUserCount,
  };
};

在以下的示例代码中我们可以看出，可以优化mixins的缺陷；因为变量可以解构赋值避免了变量名重复以及可维护性差的情况。

示例使用代码:

typescript 复制代码

<div>{{ userCount }}</div>
<script setup lang="ts">
import { useUserCount } from '@/hooks/userCount';
const { userCount, incrementUserCount } = useUserCount();
</script>

总结

Vue2时代Option Api ，data、methos、watch.....分开写，这种是碎片化的分散的，代码一多就容易高耦合，维护时来回切换代码是繁琐的！
Vue3时代Composition Api，通过利用各种Hooks和自定义Hooks将碎片化的响应式变量和方法按功能分块写，实现高内聚低耦合
形象的讲法：Vue3自定义Hooks是组件下的函数作用域的，而Vue2时代的Mixins是组件下的全局作用域。全局作用域有时候是不可控的，就像var和let这些变量声明关键字一样，const和let是var的修正。Composition Api正是对Vue2时代Option Api 高耦合和随处可见this的黑盒的修正，Vue3自定义Hooks是一种进步。
把Mixin和自定义Hook进行比较，一个是Option Api的体现，一个是Composition Api的体现。如果能理解高内聚低耦合的思想，那么就能理解为什么Vue3是使用Composition Api，并通过各种自定义Hooks使代码更强壮。像写诗一样写代码。而不是写屎。
原文地址：前端雾恋-vue3中简单的hooks怎么写？