当前位置：首页 > article >正文

Vue3-hooks代替mixins

article 2024/11/6 0:56:56

mixins缺陷

mixins在使用中存在以下致命缺陷：

由于mixins混入的特性，其中定义的变量相当于隐式引入了父组件，从而导致变量难以定位到其定义的具体位置
若父组件仅需要mixins中某一小段逻辑，通过mixins的方式还是只能将整个mixins文件引入后进行使用，无形中增加了无效代码的引用
最致命的便是多mixins引入重名的情况
例如：当前页面引入了多个mixins，每个mixins内均定义了一个变量名为list,我既想使用mixinsA中的list又想使用mixinsB中的list就成为了一个令人头疼的问题。

Hooks

很显然，越来越多的框架开发者们也注意到了mixins的上述缺陷，因此急需一种新的代码复用逻辑的优化方案，由此基于hooks实现代码复用的方式横空出世。
所谓hooks直译过来便是钩子函数。我们可以将mixins理解为一个将<script></script>标签部分的js逻辑代码片段文件，而hooks正如其中文译名，不同于mixins其本质上是一个可以复用的函数，其在vue3的setup()中调用。

hooks 使用

在项目路径下新建一个名为hooks的文件夹，在里面新建名为 xxx.js的一个hooks文件, 注意hooks组件的命名规范为，use+hooks功能名的大驼峰命名方式，例如：需要封装一个table复用的hooks,则命名为useTable.js

//useTest.js
import { ref } from "vue";

export default function useTest() {
  //定义变量
  const list = ref([1, 2, 3, 4, 5]);
  const msg = ref("我是hooks中的数据");

  //使用生命周期函数
  onMounted(() => {
    console.log("我是hooks中定义的onMounted()");
  });
  //定义方法
  const total = () => {
    let sum = list.reduce((pre, cur) => {
      return pre + cur;
    }, 0);
    return sum;
  };
  const getList = () => {
    return list.value
  };
  //将需要使用的数据和函数暴露出去
  return {
    list,
    msg,
    total,
    getList
  };
}

在父组件中引入hooks

<!--父组件中引入hooks -->
<template>
    <div>
        <div>我是父组件的数据</div>
        <!-- 使用hooks中的变量 -->
        <div>{{msg}}</div>
        <!-- 使用hooks中的方法进行求值 -->
        <div>{{count}}</div>
    </div>
</template>

<script lang="ts" setup>
import useTest from './hooks/useTest.js'

//需按需求自由hooks中的变量和方法
const {msg,total,list} = useTest()

const count = ref(total)
</script>

<style lang="scss" scoped>

</style>

hooks的优势和不足：

优势:

hooks让开发者可以根据当前页面的需求，选择性的引入hooks中的变量和方法，减小无效代码的复用
不同于mixins，hooks中引入的变量通过hooks名.变量名的方式进行使用，从而避免了变量重名的问题，即使变量重名，只要对应的hooks组件不重名，就可以通过hooks名.变量名的方式进区分。

不足: