快捷導(dǎo)航

Vue3?Hooks?模塊化抽離示例詳解

更新時(shí)間：2022年09月19日 16:37:42 作者：wangfeng6075

這篇文章主要為大家介紹了Vue3?Hooks?模塊化抽離示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

Vue3中的Hooks 其實(shí)就是業(yè)務(wù)邏輯的抽離，跟Vue2中mixin 本質(zhì)上是一樣的：將當(dāng)前組件的業(yè)務(wù)邏輯抽離到一個(gè)公共的文件中，提高邏輯復(fù)用性，讓當(dāng)前組件看起來更加清爽，不太一樣的地方是我們封裝hooks 的時(shí)候一般是返回一個(gè)函數(shù)。

todoList demo

先來看一個(gè)簡單的例子：todoList demo。

新建一個(gè)Vue3+Ts的項(xiàng)目： npm init vite@latest 項(xiàng)目名稱:vue3-hooks，使用TS，然后cd vue3-hooks -> npm install -> npm run dev 然后刪除不必要的內(nèi)容，新建一個(gè)type 文件夾存放所有的類型，新建一個(gè)TodoList.vue編寫我們的業(yè)務(wù)和視圖代碼：

目錄結(jié)構(gòu)

TodoList.vue代碼如下

<template>
  <h1>To do List</h1>
  添加一條記錄: <input type="text" v-model="data.toAddData.title" />
  <button @click="onAdd">添加</button>
  <br />
  <br />
  <table>
    <thead>
      <tr>
        <td>id</td>
        <td>名稱</td>
        <td>是否完成</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data.list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.isFinished }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { IntTodoList } from "../type/todoList";
type DataType = {
  list: IntTodoList[];
  toAddData: IntTodoList;
};
const data = reactive<DataType>({
  list: [],
  toAddData: {
    id: 0,
    title: "",
    isFinished: false,
  },
});
const onAdd = () => {
  data.list.push({ ...data.toAddData, id: data.list.length + 1 });
};
</script>

定義的類型文件

interface IntTodoList {
  id: number;
  title: string;
  isFinished: boolean;
}
export type { IntTodoList };

邏輯抽離

新建一個(gè)hooks 文件夾，在hooks 文件夾中新建一個(gè)todoList.ts 文件，將TodoList.vue 中的data 數(shù)據(jù) 和onAdd 方法抽離到hooks文件中，并導(dǎo)出：

import { reactive } from "vue";
import { IntTodoList } from "../../type/todoList";
export default () => {
  type DataType = {
    list: IntTodoList[];
    toAddData: IntTodoList;
  };
  const data = reactive<DataType>({
    list: [],
    toAddData: {
      id: 0,
      title: "",
      isFinished: false,
    },
  });
  const onAdd = () => {
    data.list.push({ ...data.toAddData, id: data.list.length + 1 });
  };
  return { data, onAdd}
};

在TodoList.vue 中導(dǎo)入：

<template>
  <h1>To do List</h1>
  添加一條記錄: <input type="text" v-model="data.toAddData.title" />
  <button @click="onAdd">添加</button>
  <br />
  <br />
  <table>
    <thead>
      <tr>
        <td>id</td>
        <td>名稱</td>
        <td>是否完成</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data.list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.isFinished }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script setup lang="ts">
import TodoListHooks from './hooks/todoList'
const {data, onAdd} = TodoListHooks()
</script>

如果其他組件需要data 數(shù)據(jù) 和 onAdd 方法，也可以導(dǎo)入hooks 文件使用，而且現(xiàn)在再來看TodoList.vue 文件看上去是不是非常清爽。功能跟未抽離前是一樣的：