Vue3 中使用 setup 与 hooks 组织代码详解

今天在哔哩哔哩上看到一个关于 Vue3 面试题的视频，主题是 “vue3 如果用 setup 写怎么组织代码？”，觉得很有收获，特在此分享给大家。

 

视频首先解释了混入（mixin）的概念，混入就是写一些方法或值，可以在全局或某个组件中使用，但没有视图部分（template）。接着引出了 hooks，它类似于混入，但主要是函数式编程的思想，用于解决代码混乱的问题，让功能模块细分，提高项目的维护性。

 

以下是用 hooks 进行代码组织的示例代码：

 

在 Vue3 的项目中，假设我们有一个登录页面，页面中有初始化获取验证码、登录、记住密码三个功能。如果不使用 hooks，所有代码都写在一个 script 标签的 setup 中，会非常乱，尤其是功能多的时候。比如以下是未使用 hooks 的代码示例：

 

<template>
  <!-- 登录页面的模板内容 -->
</template>

<script>
import axios from 'axios';

export default {
  setup() {
    // 生命周期部分
    //...

    // 图形验证码部分
    //...

    // 记住密码部分
    //...

    // 初始化获取验证码功能
    function initGetCode() {
      //...
    }

    // 登录功能
    function login() {
      //...
    }

    // 记住密码功能
    let rememberPassword = false;
    function toggleRememberPassword() {
      rememberPassword =!rememberPassword;
    }

    return {
      initGetCode,
      login,
      rememberPassword,
      toggleRememberPassword
    };
  }
};
</script>

 

这样的代码会随着功能的增加变得难以维护。而使用 hooks 可以将主要功能和小功能分开，将小功能移到单独的文件中。一般在项目的根目录或 src 目录下新建一个 hooks 文件夹来存放这些功能模块。

 

例如，在 hooks 文件夹中新建一个记住密码的 ts 文件（useRememberPassword.ts）：

 

import { ref } from 'vue';

export function useRememberPassword() {
  let nm = ref(10);
  const toggleRememberPassword = () => {
    nm.value = nm.value === 10? 20 : 10;
  };
  return { nm, toggleRememberPassword };
}

 

在登录页面中引入并使用这个 hooks：

 

<template>
  <!-- 登录页面的模板内容 -->
</template>

<script>
import { useRememberPassword } from './hooks/useRememberPassword';

export default {
  setup() {
    const { nm, toggleRememberPassword } = useRememberPassword();
    console.log(nm.value);
    toggleRememberPassword();
    console.log(nm.value);

    // 其他功能代码...

    return {
      //...
    };
  }
};
</script>