Vue学习记录之十四 自定义hooks综合实例
自定义 Hook 就是自定义函数，但这些函数通常依赖 Vue 的组合式 API，并封装组件逻辑，使其更易于维护和复用。自定义 Hook 可以像普通函数一样调用，但在设计时要考虑组件的生命周期和响应式数据。
一、实例1 图片转化为64编码
<template>
<div>
<img id="img" width="300" height="300" src="./assets/images/1.jpg" />
</div>
</template>
<script setup lang='ts'>
import {
ref,reactive } from 'vue'
import useBase64 from './hooks'
useBase64({
el:'#img'}).then(res=>{
console.log(res.baseUrl)
})
</script>
./hooks/index.ts
import {
onMounted } from "vue"
type Options = {
el:string
}
//为了获取到返回值，使用Promise，那么返回值的类型就是Promise, 返回值是字符串类型的baseUrl
export default function(options:Options