VUE2进阶至VUE3九（Hook）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

自定义Hooks

说起Hooks，自然而然会想到React。因为Hook这个概念最早是在React中提出来的。但是会发现Vue3中的Hook用起来更加得心应手~

• Vue与React

  Vue在保留自身的特性与方法时，又借鉴了React的设计方式。React为状态导向，Vue则是视图导向，所以它们的Hook也是有差异的。

• Vue与React Hook异同：

  React中的Hook是在函数组件中保留state的同时又加入生命周期然后将整体作为一个函数，这就会造成一个组件中的state会影响许多个组件的props而造成地狱嵌套。

  Vue3当中的Hook则运用了组合式API的方式，将方法整合。我们可以将同一个功能的方法放在一个函数中，再也不用担心会分布在很多个不同的操作域当中了。相对于React的优化则是解除了函数组件的同时也提高了性能。

• 为什么要用Hook，用在哪里？

用于日常项目中对于重复性逻辑代码的封装。在vue2中的有Mixins也有类似的作用，只不过会涉及到值被覆盖的问题。问题所在就是组件内的生命周期会覆盖Mixins的生命周期，导致组件内与Mixins相同的变量会被组件中的变量所覆盖。然而vue3中Hooks就不会出现这个问题，当然Hooks也解决了。

Vue3中组合式API的方式书写hooks，让代码看起来简洁明了，再不用像类似于Vue2中，将变量、方法、监听等数据拆分到各个地方。

• Hook的初衷：高内聚，低耦合。将相关逻辑组合在一起进行复用，把复用接口暴露给其他组件使用

• Hook的好处：

  1、代码简洁，利于复用；

  2、有利于后期维护，不会牵扯到隐藏依赖；

  3、代码易读，易拓展，利于多人协作开发；

题外话（偶然记录）： 子组件中useAttrs函数，会接收到父组件传过来的所有值，useSlots则可以获取插槽。

// 子组件
<template>
  <div>111</div>
</template>
<script setup lang="ts">
import { useAttrs } from 'vue';
let attr = useAttrs();
console.log(attr);
</script>
// 父组件
<template>
  <div class="home">
    <Jxx title="123"/>
  </div>
</template>
<script setup lang="ts">
 import Jxx from '../components/jxx.vue';
</script>