您好,登录后才能下订单哦!
这篇文章主要介绍“Vue3 composition API怎么实现逻辑复用”,在日常操作中,相信很多人在Vue3 composition API怎么实现逻辑复用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue3 composition API怎么实现逻辑复用”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
Composition API实现逻辑复用的步骤:
抽离逻辑代码到一个函数,这个函数命令约定为useXXX格式(这点同React Hooks)
在setup中引用函数useXXX
举下例子,定义一个获取当前鼠标位置的方法
这种方式,导出和导入都可以随意解构
// 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>
这种导出的方式,在组件中导入时是不能解构的
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>
使用这种方式,可以将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怎么实现逻辑复用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。