Vue组合式函数(一)

简介: Vue组合式函数(一)

前言


当我们开发大型项目的时候,为了更好的复用代码,往往会声明很多的组件,以此来解决模板及逻辑代码的冗余。但有些时候,我们只想进行逻辑代码的复用。比如说我们会把时间格式化的代码抽离成一个函数,传入时间,就会返回相应的时间格式。


而对于这种逻辑,我们可以叫它无状态的逻辑。接受相应格式的值,返回我们预期的结果。像这种封装无状态逻辑的库有很多,比如广为人知的lodash就是。


尽管以上两种封装方法,可以解决我们开发中很多的代码复用问题。但是我们如果想要封装带有生命周期的逻辑时(也就是有状态的逻辑,会随着时间而变化状态),却是力不从心的。当然,Mixin可以做到,不过他很难以维护的问题却让人诟病。


为此,在vue3中推出了组合式函数来帮助我们复用有状态的逻辑。而这一亮点功能,也正是vue3的灵魂所在。


组合式函数


“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。


下面,我们来通过一个简单的小例子(跟踪鼠标在当前页面的位置)来看一看组合式函数的奥秘。


我们先看在组件中使用组合式api是如何实现的:


<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const x = ref(0)
const y = ref(0)
function change(event) {
  x.value = event.pageX
  y.value = event.pageY
}
onMounted(() => window.addEventListener('mousemove', change))
onUnmounted(() => window.removeEventListener('mousemove', change))
</script>
<template>当前鼠标的位置: {{ x }}, {{ y }}</template>
复制代码


像上面的代码,我们如果想进行复用的话,就可以通过组合式函数的方式来进行封装为一个js的文件。


// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'
// 组合式函数名约定以“use”开头
export function useMouse() {
  // 组合式函数封装管理的状态
  const x = ref(0)
  const y = ref(0)
  // 通过组合式函数可以随时更改其状态。
  function change(event) {
    x.value = event.pageX
    y.value = event.pageY
  }
  // 组合式函数的有点就在于可以使用生命周期进行挂载
  onMounted(() => window.addEventListener('mousemove', change))
  onUnmounted(() => window.removeEventListener('mousemove', change))
  // 返回封装管理的状态
  return { x, y }
}
复制代码


然后,我们在组件中进行使用:


<script setup>
import { useMouse } from './mouse.js'
const { x, y } = useMouse()
</script>
<template>当前鼠标的位置: {{ x }}, {{ y }}</template>
复制代码


看过上面的代码,相信你也大概了组合式函数的妙用了吧。他很好的抽离有逻辑状态的代码,并能让所有组件进行复用。而且和在组件中一样,你可以使用所有的组合api,做到很好的替代组件中的逻辑业务部分。

相关文章
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
148 1
|
7天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
11天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
7天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
7天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
28天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
55 8
|
29天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
75 1
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
3月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的

热门文章

最新文章