Composition API实现逻辑复用的步骤:
- 抽离逻辑代码到一个函数,这个函数命令约定为useXXX格式(这点同React Hooks)
- 在setup中引用函数useXXX
举下例子,定义一个获取当前鼠标位置的方法
第一种,直接使用ref定义的useMousePosition:
这种方式,导出和导入都可以随意解构
// useMousePosition.js import { ref, onMounted, onUnmounted } from 'vue' // 1. 定义一个函数,抽离逻辑,命名使用 useXXX function useMousePosition() { // 使用ref定义 const x = ref(0) const y = ref(0) function update(e) { console.log(x.value, y.value); x.value = e.pageX y.value = e.pageY } onMounted(() => { console.log('开始监听鼠标划动事件'); window.addEventListener('mousemove', update) }) onUnmounted(() => { console.log('解除监听鼠标划动事件'); window.removeEventListener('mousemove', update) }) return { x, y } } // 导出这个函数 export default useMousePosition
<!-- 在任意一个组件,都可以调用这个方法 --> <template> <p>mouse position: {{x}}, {{y}}</p> </template> <script> import useMousePosition from './useMousePosition' export default { name: 'MousePosition', setup() { // useMousePosition是使用ref定义变量的,这种可以解构 const { x, y } = useMousePosition() console.log(x, y) return { x, y } } } </script>
第二种,使用reactive定义鼠标坐标对象
这种导出的方式,在组件中导入时是不能解构的
import { onMounted, onUnmounted, reactive } from 'vue' export function useMousePosition2() { // 使用reactive定义 const mouse = reactive({ x: 0, y: 0 }) function update(e) { mouse.x = e.pageX mouse.y = e.pageY } onMounted(() => { console.log('开始监听鼠标划动事件'); window.addEventListener('mousemove', update) }) onUnmounted(() => { console.log('解除监听鼠标划动事件'); window.removeEventListener('mousemove', update) }) return { mouse } } <template> <!-- 使用对象方式显示信息 --> <p>mouse position2: {{mouse.x}}, {{mouse.y}}</p> </template> <script> import { useMousePosition2 } from './useMousePosition' export default { name: 'MousePosition', setup() { // useMousePosition2是使用reactive定义的,这种不可以解构 const { mouse } = useMousePosition2() return { mouse } } } </script>
第三种,使用toRefs
使用这种方式,可以将reactive对象,解构为ref对象
export function useMousePosition3() { // 使用reactive定义 const mouse = reactive({ x: 0, y: 0 }) function update(e) { mouse.x = e.pageX mouse.y = e.pageY } onMounted(() => { console.log('开始监听鼠标划动事件'); window.addEventListener('mousemove', update) }) onUnmounted(() => { console.log('解除监听鼠标划动事件'); window.removeEventListener('mousemove', update) }) // 这里,使用toRefs解构成ref对象 return toRefs(mouse) } <template> <p>mouse position: {{x}}, {{y}}</p> </template> <script> import { useMousePosition3 } from './useMousePosition' export default { name: 'MousePosition', setup() { // 使用reactive定义鼠标坐标对象,然后通过toRefs将其解构成ref对象 const { x, y } = useMousePosition() console.log(x, y) return { x, y } } } </script>
三种方式都可以实现,但是我们一般使用时,都会返回ref对象,所以比较建议使用第一种和第三种,尽量不使用第二种
到此这篇关于Vue3 composition API实现逻辑复用的方法的文章就介绍到这了,更多相关Vue3 composition API逻辑复用内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟!
您可能感兴趣的文章:
- 使用Vite2+Vue3渲染Markdown文档的方法实践
- Vue3导航栏组件封装实现方法
- Vue3 之 Vue 事件处理指南
- vue3单文件组件中style特性的深入讲解
- vue3.0+echarts实现立体柱图
- 一文带你了解vue3.0响应式
- 详解vue3.2新增的defineCustomElement底层原理
- Vue3 + TypeScript 开发总结
- Vue3+TypeScript实现递归菜单组件的完整实例
- vue3实现一个todo-list
- Vue3+script setup+ts+Vite+Volar搭建项目
- Vue3实现图片放大镜效果
- vue3.0+vant3.0快速搭建项目的实现
- vue3 文档梳理快速入门
本文由 华域联盟 原创撰写:华域联盟 » Vue3 composition API实现逻辑复用的方法
转载请保留出处和原文链接:https://www.cnhackhy.com/79762.htm