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>