没有合适的资源?快使用搜索试试~ 我知道了~
内容概要:本文深入介绍了在Vue3项目中实现逻辑复用的方法和技术。具体阐述了三种主要方式,包括自定义hook函数(类似Vue2的mixin混入),它通过将Composition API进行合理的拆封提高代码的可维护性和可读性;同时探讨了通过自定义指令来满足特定的功能性需求;还介绍了利用插件机制扩大应用程序的能力和灵活性。 适用人群:对现代前端架构有基本认识并希望深入了解Vue框架优化开发效率的相关从业人员。 使用场景及目标:本篇文章可以帮助开发者掌握在实际项目中更好地实现模块化设计技巧,以及怎样高效地复用业务逻辑,使团队协作更加流畅,减少冗余代码的出现。 其他说明:推荐初学者从简单示例入手逐步探索复杂功能实现的同时参考官方API文档资料进一步加深理解。
资源推荐
资源详情
资源评论































vue3逻辑复用
1. 将Vue3的逻辑复用分为三个方式:组合式函数(hook)、自定义指令、插件
自定义hook函数
1. 官网地址:组合式函数 | Vue.js (vuejs.org)
hook定义
1. hook:本质上是一个函数,用于将setup函数中使用的Compositon API(组合式API)进行封装
2. hook类似于vue2中的mixin混入
1. 自定义hook的优势:进行代码复用,让setup中的逻辑更清楚易懂
使用hook
1. 新建一个hooks文件夹,在文件夹中创建js文件,文件名一般为usexxx.js
2. 配置自定义hook函数,如下面案例(获取当前鼠标点击位置的坐标):
3. 使用自定义hook函数:在需要使用hook的组件中,引入封装好的hook的js文件
自定义指令
import {reactive, onMounted, onUnmounted} from 'vue'
export function usePoint () {
let point = reactive({
x: '',
y: ''
})
// 获取鼠标当前点击位置的坐标
function savePoint (event) {
point.x = event.pageX
point.y = event.pageY
}
onMounted(() => {
window.addEventListener('click', savePoint)
})
onUnmounted(() => {
window.removeEventListener('click', savePoint)
})
return point
}
import { usePoint } form '...'
资源评论


「已注销」
- 粉丝: 2765
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈



安全验证
文档复制为VIP权益,开通VIP直接复制
