vue2时期的hook

最早在vue2的时候用的hook的认知可能就是就是onMounted等生命周期函数，当时这个认知是百度别人这么说的，说实话其实是不太理解的，不就是一个函数嘛，怎么就又是hook了，但网上这么说也就这么认为了。vue2基本也是用不到hook的（或者说也不用理解），功能上的聚合封装其实只要使用util，util不够就用mixin（多了生命周期等功能），mixin不够就封装业务组件（多了界面）。如果非要整点结论性的东西就是：他们都是基于业务逻辑的封装，只是粒度不同，从小到大为 util < mixin < 组件。然后一直以来这样写项目其实也一点问题也没有。
简单举个例子，比如根据输入值加个长度单位：

uitl形式如下：

export function appendUnit(value) {
  if (value > 1000) {
    return value / 1000 + 'km'
  } else {
    return value + 'm'
  }
}

2.mixin形式如下：

export default {
  data() {
    return {};
  },
  computed: {},
  created() { },
  mounted() { },
  methods: {
    appendUnit(value) {
      if (value > 1000) {
        return value / 1000 + 'km'
      } else {
        return value + 'm'
      }
    }
  },
};

3.组件形式如下

<template>
  <div>
    {{ appendUnit(src) }}
  </div>
</template>

<script>
export default {
  name: "AppendUnit",
  data() {
    return {
    };
  },
  props: {
    src: Number,
  },
  mounted() {
  },
  methods: {
    appendUnit(value) {
      if (value > 1000) {
        return value / 1000 + 'km'
      } else {
        return value + 'm'
      }
    }
  }
};
</script>

<style scoped>
</style>

这里只是举个例子，加个单位肯定用util就够了，没有涉及vue的功能；mixin基本就是分页这种比较固定业务逻辑的（也是学的网上的）；组件封装反而是最多，比如选择城市，既有界面，业务逻辑也比较死，所以像网上说的mixin多了后比较混乱，个人倒觉得还好。这个例子和hook其实没多大关系，其实是为了和下面的vue3作对照。

vue3时期的hook

vue3发布后Composition API也被推到台前，经常会被提到。百度后网上是把Composition API和hook等同起来的，网上的说法也是各不相同，看的也是云里雾里，说的也很难自洽。还是以加单位为例看看，uitl和组件的形式是不变的，主要看看Composition API形式：

export default function useUnit( params? :any){
  const output=params??ref(0);
  //这里其实对比上面的话应该定义方法的，这样写主要是想展示Composition API可以使用vue的组件方法。
  const outputer = computed(()=>{
    if (output.value > 1000) {
      return output.value / 1000 + 'km'
    } else {
      return output.value + 'm'
    }
  })

  return {
    output,
    outputer
  }
}

使用如下：

<template>
  <div>
    <el-input v-model="output"></el-input>
    <div>{{ outputer }}</div>
  </div>
</template>
<script lang="ts" setup>
import useUnit from "@/hooks/useUnit";
const { output, outputer } = useUnit();
</script>

思考

这些例子看啊看想啊想啊，什么鬼，完全搞不懂。看下hook的定义：是计算机程序设计术语，指通过拦截软件模块间的函数调用、消息传递、事件传递来修改或扩展操作系统、应用程序或其他软件组件的行为的各种技术。处理被拦截的函数调用、事件、消息的代码，被称为钩子（hook）。拦截？传递？怎么那么像java的代理呢！估计思想就是这么个思想，但是由于js本身function就是和变量一样，所以对mount作前后拦截只要结构上定义个beforeMount和mounted就等于了做了前后拦截或者扩展操作。
so，那我这样调三个方法

fun1();
fun2();
fun3();

问题：fun1和fun3算不算hook呢？

结论

可以明确的是：

Composition API压根和hook没半毛钱关系，只不过Composition API里可以使用mounted等方法而已。
util和mixin/Composition API的区别是util无法使用vue的内置方法。
mixin和Composition API最大的区别就是mixin无法选择你要不要某些功能。具体变量是干嘛的，mixin和Composition API其实都要看源码或用例的。

纯属个人理解，错了勿喷。

对于VUE hook/Composition API的认知变化

vue2时期的hook

vue3时期的hook

思考

结论