| Composition API实现逻辑复用的步骤： - 抽离逻辑代码到一个函数，这个函数命令约定为useXXX格式（这点同React Hooks）
- 在setup中引用函数useXXX
举下例子，定义一个获取当前鼠标位置的方法 第一种，直接使用ref定义的useMousePosition：
这种方式，导出和导入都可以随意解构
// useMousePosition.jsimport { ref, onMounted, onUnmounted } from 'vue'// 1. 定义一个函数,抽离逻辑，命名使用 useXXXfunction 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逻辑复用内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
JavaScript 鼠标事件(MouseEvent)案例讲解
vue-pdf实现文件在线预览 |
