vue3 hooks

一. 在项目目录中新增hoos文件夹 

import { ref, onMounted } from "vue";

// vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，
// 或者说是一些可以复用的公共方法/功能。其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

// 下边方法在每个组件中如果有需要就可以调用  包括我们可以用于封装table表单 以及form表单之类的
// 其实hooks就是把各个需要抛出的数据放在一个函数中统一抛出  也可接受传参
const userCapOption = () => {
  const data = ref(0);
  // 在页面加载出来后对当前数据每个一秒钟+5
  onMounted(() => {
    // setInterval(() => {
    //   data.value += 5;
    // }, 1000);
  });
  // 如果是多个参数  就用return {x, x, x} 在引入方法时就通过 const {x, x, x} = userCapOption()方法获取
  return data;
};

export default userCapOption;

二. 在具体的组件中使用

<template>
  <div>
    <div>++{{ data }}</div>
  </div>
</template>
<script setup lang="ts">
// vue hooks方法引入
import userCapOption from "@/hooks/initVitlie";

const data = userCapOption();

</script>