免费制作个人网站的软件,北京网站建设公司排名,中国著名的网站建设公司,买网站域名“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
一个实现实现鼠标跟踪功能
script setup
import { ref, onMounted, onUnmounted } from vueconst x ref(0)
const y ref(0)function update(event) {x.value event.page…“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
一个实现实现鼠标跟踪功能
script setup
import { ref, onMounted, onUnmounted } from vueconst x ref(0)
const y ref(0)function update(event) {x.value event.pageXy.value event.pageY
}onMounted(() window.addEventListener(mousemove, update))
onUnmounted(() window.removeEventListener(mousemove, update))
/scripttemplateMouse position is at: {{ x }}, {{ y }}/template如果我们想在多个组件中复用这个相同的逻辑 可以把这个逻辑以一个组合式函数的形式提取到外部文件中
外部文件 mouse.js
// mouse.js
import { ref, onMounted, onUnmounted } from vue// 按照惯例组合式函数名以“use”开头
export function useMouse() {// 被组合式函数封装和管理的状态const x ref(0)const y ref(0)// 组合式函数可以随时更改其状态。function update(event) {x.value event.pageXy.value event.pageY}// 一个组合式函数也可以挂靠在所属组件的生命周期上// 来启动和卸载副作用onMounted(() window.addEventListener(mousemove, update))onUnmounted(() window.removeEventListener(mousemove, update))// 通过返回值暴露所管理的状态return { x, y }
}引入到组件
script setup
import { useMouse } from ./mouse.jsconst { x, y } useMouse()
/scripttemplateMouse position is at: {{ x }}, {{ y }}/template在useMouse() 的功能可以在任何组件中轻易复用了。
